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44 Rushing into 
writing code 
always causes 
problems later on 
in the project 

One of the many challenges of 
completing big projects as 
described by Less Rain. 

Page 28 


How secure is your WordPress blog? 


he Internet isn't a utopian 1950's 
;i suburb, The ramifications for leaving 
your back door unlocked online are 
damning and there are no creaky 
mr \ j: ||: floor boa rds to g i ve a n a ssailan t 
• :: away. Li ke a my ki nd of mi sdeed. 

internet security breaches have many 
motivations, but they usually boil 
down to throe key drivers - financial gain, prestige and 
ease of access. The real-world translations of these 
online crimes are essentially one and the same whether 
it's cracking a bank, breaking into a celebrity residence 
or taking advantage of a sorry idiot that's left their 
windows open. 

Since it’s unlikely you're a global financial institution 
or Facebook's Mark Zuckerberg, the biggest danger 
you're going to encounter is that of falling into the latter 


category. Ultimately, you need to apply every day 
common sense to your online endeavours and batten 
down the hatches, especially if you're using a CMS as 
ubiquitous as WordPress. That's exactly what Leon 
Brown shows us how to do in his unmissable feature 
starting on pa ge 

In other news, regular readers have probably spotted 
that I'm a new face in the magazine team. Mark Billed, 
with a whopping 80 issues of Web Designer under his 
belt, has moved on to pastures new and we wish him 
the best of luck in whatever he turns his hand to. The 
magazine wouldn't be what it is today without his stellar 
efforts, so, suffice it to say l fully intend to continue 
Mark's mission to ensure Web Designer is an accessible 
and inspiring voice for the industry. 

Enjoy the issue! 

Bussell Barnes 


if Once a project 
reaches a critical 
mass of users, it 
becomes viable for 
the more criminally 
inclined hackers if 1 


Follow us on Twitter for all the news & conversation I @WebDesignerMag 
Visit our blog for opinion, freebies & more www.webdesignermag.co.uk 
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Excitographic 

Plotting the features that got us 
in a frenzy over the month... 

A Steve Jenkins. Features Editor 
A Russell Barnes. Editor 
A Steven Mumby, Designer 
A Ben Martin. Sub Editor 


Turn over to the contents to 
discover what's going to get you 
excited this issue... 
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This issue’s panel of experts 


Welcome to that 
bit of the mag 
where we learn 
more about the 
featured writers 
and contributors.. 


m Once a project 
reaches a critical 
mass of users, it 
becomes viable for 
the more criminally 
inclined hackers £9 



Leon Brown is a freelance consultant providing services to create websites 
and apps for web and mobile. He also delivers training for developers and 
creative. Read more at www.leonbrown. info In this month's cover 
feature he shows us how to keep safe with Word Press. Page 36 



Chris Wrig ht 




MarkShuftlebottom 


fa 


Chris is the founder of The 
Scribble Agency an IT 
copywriting company in 
Loader. He also writes 
extersivielyofi SharePoint. 
web trends and general IT 
topics. This issue he cowers 
design with the new hi res 
iPad in miixJ Page 44 



Louis slings Rubycn Rails for 
Fippa, &nd hosts the 
SitePolnt podcast for 
designers and developers, 
He returns to Web Designer 
this issue with an article 
investigating how to get 
better results with CSS3 
using SA£5.PageB2 



Mark is an Adobe Education 
Leader and programme 
co ordinator of BA (Hons) 
interactive Media 
Productfon bI Bournemouth 
University This issue Mark 
concludes his series on 
maklnq an HTMLSgame 
with Easel J5. Page 56 


Adam Smith 


Sam Hampton-Smith 


Matt Gifford 



Adam tranters he sklis 
from our sister magazine 

Adva need Photoshop 
t.wiww adva ncedphntnshnp 

across to Web 
Designer, where he 
demonstrates hew to 
refresh your landing pages 
using CS£. Page 68 
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A keen supporter of Web 
standards. Sam loves getting 
the most out of HTML and 
CSS. Vbu can fallow his 
antics on Twitter via 
@-53fnhg, This month 
shows us how to create 
dynamic content animations 
using CSSS. Page +fl 



Mart is a load Rl A consultant 
developer who specialises in 
ColdFusion. Fiashand AIR 
development. This issue he 
puts his vast Industry 
experience into practice by 
sbowingus howtotuikl 
HTML In JavaScript using 
HTML, ho kidding. Page && 


Steve Jenkins 


Simon Bisson 



Steve is Features Editor on 
Web Designer and has 
been creating! websites 
since 1993. His Interests 
include HTML CSS and 
WordPress. This issue he 
profiles Less Rain among 
many other thugs. Page 2d 



With a background in it and 
engineering. Simon is a 
highly respected 
technology Journalist. This 
issue he's coridudlngour 
development section with a 
guide demonstrating how 

to assemble a web server 
with Node Jr. page 92 
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20 Lightbox 

Three sites that make tie web a better place 
including Little Workshop and The Big Bum 

26 Design diary: Hard Graft 

This month we go in-house with duo James 
Teal and Monie.Ka of Hard Graft 

28 Erolilfc Less Rain 

Less Rain tells us why Rash is still the best tool 
for creating engaging multimedia experiences 

34 Blog beautiful 

A roundup of the best Tumblelogs around 

36 Cover; WordPress security 

Leon Brown shows us how to batten down the 
hatches on the world's favourite FGSS CMS 

78 Design cloud 

24 websites with memorable, impactful logos 

98 Portfolio 

Three more rising stars in the web world 

104 Hosting listings 

Check out the latest domain-based deals 

U4 Style relic; foursquare 

The evolution of this popular location-based 
service explored 
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Discussing the hottest topics 
from the web-design world 

8 Mobile c ommerce 

mCommerce is struggling to keep pace with 
smartphone and tablet sales - time tor change 

12 C rowdsource 

We respond to your latest letters and tweets 

14 Comment: Lubos Buradnskv 

Will Adobe live to regret their recent revenue 
model announcement? 

16 Comment Patrick Llewellyn 

99 designs' CEO tackles the controversial 
topic of crowdsourcing competitions 
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Profile: Less Rain 

Creating projects less predictable than the weather 


Responsive design and the new iPad Lightbox: MozillaBrowserQiiest 

Exploring the new cha llenges web designers face Discover Little Workshop s big adventure 
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NEW! Dedicated 16-page section offering 
features and tutorials for coders 


Feature 

Supercharge your CSS with Sass 

Give your CSS some serious attitude using 
Syntactically Awesome Stylesheets 


92 Assem ble a web server 
with Node.js 

When a fully-loaded web server is overkill you car 
roll-your-own’ with the help of Node.js, 


<tutorials> 

Web gurus take you step-by-step 
through professional techniques 

48 Dynamic content animations 

You no longer need JavaScript to create fluid content 
transitions - CSS 3 will do the hard work for you 

52 Create eve-catchina box 
blur effects 

Use HTML5, CSS3 and jQuery to create blur effects that 
animate in and out of focus as you hover the mouse 

56 Build an HTML5 game with 
Ease IJS: part 2 

This month Mark Shuff lebottom adds core aspects of the 
game engine including collision-detection and movement 

60 Give vour Word Press project Roots 

Utilise the Roots theme to create a development-ready 
site with HTML5 Boilerplates and Twitter bootstrap 

64 Make electric type effects 

Ad neon and lightbox effects to your type 
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Create templates with 
Mustache.js 

Matt Gifford teaches us how to build HTML In 
JavaScript using HTML! 


Masterful scrolling 

effects with inTacto 

Mark Shuff lebottom shows us 
how to utilise scrolling effects 
and animation as featured 
on www.i ntactolOyears.co m 


Single-page navigation 

and style 

Create the ultimate single 
scrolling page with Adam 

zihijhr de as your guide 


Web workshop 


On the free CD 

112 Discoverjwbat yourlatestdlschas tooffer 

A comprehensive collection 
of free designer resources! 

• 180+ minutes of video tutorials 

• 2 WordPress & Facebook themes 

• 27 Wallpaper textures 

• Velveteen font 


68 48 

Refresh your frontend Dynamic transitions 

With a little help from Photoshop CSS Forget JavaScript - CSS3 will do 


Roots Theme 

noois is. a starting Wcn^ues theme Dasod on HTMls 
Beta piato A Bootstrap from Tvrittor 


60 -—- 

Grow some Roots Electric atmosphere 

Development-ready WordPress theme Simple, but effective type effects 
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Discussing the hottest topics in the web-design world 

If you have a creative project new web product or great designer story, contact the editorial desk 

O webdesigner@imagine-publishing.co.uk 0@WebDesignerMag 



To Alex Roberts 

+447446445989 
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KEEP MOBILE 
COMMERCE 


massive and lucrative market 


O nline shopping, or eCommerce. 
is hardly a new and exciting 
experience that crea lives want 
to grab hold of and embrace 
and indulge. It could be considered the 
unglamorous sibling of web design, but its 
importance cannot be underestimated. An 
attractive web presence is all well and good, 
but if selling is an integral element of a site, 
functionality Is key. Amazon and eBay are 
some of the biggest online marketplaces in 
the world, but its fair to say that design is not 
their strong point. Where they succeed is in 
the obvious and intuitive nature of the 
purchasing process. 

The user experience is critical, and 
keeping it simple is the key to the success of 
the mobile shopping experience. Who wants 
to register via a long drawn out form before 
the shopping experience is reached? No-one 
is the answer. What happens after the 
registration? Another awkward tap challenge 
that eventually leads to the desired 
destination. Does this encourage users to 
come back or do they defect? Again the 
answer is simple; they will defect. A recent 
survey by MasterCard Worldwide revealed 


SIMPLE 


The huge growth in the sale of 
smartphones and tablets has seen 
mCommerce floundering in their 
wake. Now is the time to catch up and 
start designing for a potentially 


that one of the big issues for consumers was 
entering payment, billing and shipping 
information. They wanted a simple, fast way 
to enter account information so they could 
spend more time searching and less time 
filling out forms. Geoff Iddison. group 
executive. eCommerce and mobile for 
MasterCard Worldwide said. 'Online and 
mobile shopping puts a host of new options 
at consumers' fingertips, but the current 
checkout process needs improvement to 
fully realize the potential of these important 
retail channels? To reiterate the point the 
study also revealed that nearly 25 per cent 
of respondents said they had abandoned a 
shopping cart before completing either an 
online or mobile purchase. 

The desktop online shopping experience 
has been the key focus for eCommerce, 
and has been refined to a degree that 
ensures a va uable shopping experience, 
for most. However, the mobile shopping 
experience, the next I og leal step, needs to 1 
evolve and ride past the new challenges 
that the small screen offers. It is predicted 
that by 2015 that there will be five^times as 
many mobile connections as there are fixed 
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connections. Smartphone and tablet sales 
have far outweighed desktop sales for 
years. Figures from I DC fwww. idc.com) 
shew that shipments for Gt 2012 alone 
were 144 million, with Samsung and Apple 
being the front-runners with over 75 per 
cent between them. To add to this 
impressive set of figures, a survey from 
Nielsen [www.nielsen.com) indicates that 
the mobile web is growing eighhtimes 
faster than the web. The growth is not just 
confined to the US and Europe - it is now 
a global phenomenon. The biggest 
increase in mobile connections has been 
seen in India and China, with India seeing 
a staggering growth of over a thousand 
percent. It is predicted that China will hit 
230250 million 3G subscribers by the 
end of 2012. The mass adoption across 
developing nations is largely influenced 
by the lack of or limited infrastructure 
outside of major cities. Wireless internet is 
the easiest and cheapest way to get 
online. In fact, for many it is the only way 
to get online. 

The global mCommerce market is 
huge and it is only going to get bigger. 
There are no signs of mobile adoption 
slowing down. Locality will no longer be a 
barrier and it is unlikely that language will 
prove to be too much of an obstacle. The 
biggest issue is going to be user 
experience. A survey run by search giants 
Google found that 61 per cent of users 
said they were unlikely to return too site if 
they'd had trouble viewing it on a mobile 
device. However, more worryingly. 40 per 
cent said they would visit a competitors 
site. The Google survey also pointed out 
that having a mobile site can increase an 
online retailer's consumer engagement by 
an impressively high S5 per cent. 

So if you want to win over a potentially 
lucrative market, we suggest taking a few 
tips from the experts. A recent webinar by 
Google senior mobile account executive 
Elliott Nix. and mobile specialist Shiv 
Kumar, suggested a few rules to follow 

Keep it simple 

Design for touch 

Create a streamlined experience 

4. Focus on an easy checkout 

Take note of mobile analytic data 

6, Test, test and test some more 

Undoubtedly, a simple and common- 
sense set of rules, but ones that you will 
ignore at your peril. 


Mobile commerce showcase 

Here we cherry-pick a few examples of 
how mobile commerce should be done. 


mothercore 



ASOS 


It onl y takes two taps to gut to the de&irud 
tale gory to browse 


r 
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Mothercare 

www. moth ere are. cam 

Thu homupagu uses app sly lu icons for 
a dean and simple inter rate 


Wrn^ 





\ 1 Pharmacy 


Shop 




New Look 

w ww. new Inok rnm 

The New Look menu system ensures uses 
drop down sue-menus for quick navigation 


Un? Phglo 


Walgreens 

www.wal nrppns.rnm 

The homepage focuses on direct access 
to the available shopping categories 



CONSUMER BROADBAND CONNECTIONS 


573 MILLION 

(Fixed connecbora) 


(Mobile connections] 


2707 MILLION 

(Mobile connections) 


167 MILLION 

(Fixed connections') 


THE fiBOAOBAND revolution saw eCommerce gain ground with 
consumers, but the experience still needed to be refined to provide 
consumers with a valid and valuable online shop ping experience, A similar 
scenario is now appearing with more and more consumers accessing the 
web via a mobile device. For this very reason the mobile shopping 
experience needs to eaten up and provide an experience that rivals the 
desktop. Is that time here yet? Ves. but good mobile commerce Is still In the 
minority and online businesses need to make sure they provide the right 
ex perience. otherwise consu mets wl II loo k elsewhere. 


<comment> 

"Research from OFCQM suggests64 per 
cent of smartphone owners are in the 
ABC Is socioeconomic group, Therefore 
shoppers placing an order through a 
mobile device are typically more affluent. 
So even If the volume Is low currently, the 
potentia I for attracting la rger value ord ers 
from frequent purchases make the 
proposition of mCommerce attractive in 
the longer term. 

If you don't adopt, the likelihood is your 
more aggressive competitors will be 
venturing into the mobile arena ahead of 
you. so the opportunity is one not to be 
missed, particularly as. at last count 
[according to OFCQM) 27 per cent of UK 
adults own a smartphone. 

Mobile commerce offers online sellers 
the opportu n ity to become part of a 
consumer s offline shopping experience. 
Consumers often seek the comparative 
online price while shopping in a retail 
store. Most of the major price comparison 
sites such as Twenga and PriceGrabber 
have a mobile version of their product 
comparison engine so it is important to get 
your products listed on these sites to be 
included In their mobile search results, 

Screen size is the obvious limiting factor. 
The more content cluttering the screen 
and the longerthe time to load are also 
usability issues. 

* Keep content on product pages to the 
fundamentals: description, price, 
delivery options. Images a nd the cal I 
to action, eg ‘Buy ft Now) 

* Any buttons need to be easily Visible 
on the smaller screen and have 
sufficient space between them to 

makeclick! ng easy and avoid users 
navigating to places they did not 
want to go. 

* Make sure the size of images is 
optimised for quick display on a 
mobile device. 

* Navigation is challenging, 
partial iarly throug h an elaborate 
hierarchy of products, so a clearly 
visible and responsive search facility 
is a must. 

* Screen orientation should also be 
considered; most computer screens 
are landscape while mobiles are 
portrait so scroll functionality is 
another must. 

* Bear in mind that keypads are smaller 
a nd typing is slower thanon a 
computer, 

* Most people viewing the page will be 
on the move so time is of the essence. 
They wil I want to go to ye ur site and 
get the information they need or 
place an order as quickly as they can." 




Source; brono™* 5 l IrWtgercre Unt. Cisco. Ompti. BCG anafvTJS 


Simon Armstrong, Marketing man ager 
aft Act lnlc T vnu w.urtlMr w iik 
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Discussing the hottest topics in the web-design world 


Cloud 

hosting: 

Its the future 

Web hosts are slashing prices and adding functionality to try and tempt web 
creatives into joining the cloud hosting revolution, but why make the change? 


W eb hosting in the cloud, isn't that what 
web hosting has always been? A site 
stored on a remote server? It's not far off 
the truth. So what does a cloud server 
do? What do they have to offer? And, why, as designers 
and developers, should we care? in a nutshell, doud 
hosting aiows the end user to choose exactly the 
specifications they want quicker and easier than more 
traditional offerings. Want more memory, CPU power or 
storage? Weil with cloud hosting you can have them when 
you want them, The beauty of cloud hosting lies In its 
flexibility, scalability and speed of delivery. What could have 
taken hours - or even days - can now be achieved in 
minutes via an online control panel. 

Virtualised solutions have been enjoyed by large 
enterprises for years but hosting providers are now 
pushing hard to drive adoption with small firms and web 
pros, Research from tlie Cloud Industry Forum, which 
exists to provide clarity to end users researching a cloud 
provider, finds that 85 per cent of IT execs now consider 
cloud as a viable option for delivering new IT projects. 
.Admittedly, cloud hosting is not an ideal fit for individuals. 


but smalt business and web pros can benefit from the 
flexibility that cloud hosting offers. 

The hosting industry is investing hard into doud 
Infrastructure, pointing out that high availability with 
automatic failover in the event of hardware failure, reduces 
downtime and ensures a more productive end product 
The benefits of switching to cloud hosting are pretty 
apparent, but who s -offering cloud hosting and where can 
they be found? Companies that fit the bill are backspace 

and GoG ri d (www.gogrkj.com ) 

Racfcspace offers its cloud server service from as little as 
£7.30 a month, or alternatively, just Ip per hour for Linux 
servers. Bandwidth comes to about lip a GB. so add £1.10 
for a monthly bandwidth of 10GB Included memory is 
256MB and boasting it up to 512MB will double the price to 
£14.60. Doubling up the memory again will double up the 
monthly fee. 

Fasthosts is a UK-based hosting provider that has added 
cloud hosting to its repertoire and is currently offering 
packages from £26.99 a month. This includes 1GB of RAM. 
8GGB of disk space and 99.9996 uptime. 


GoGnd is a US-based hosting provider that offers 
pay-as^yon-go billing and pre*paid plans. The pay as you 
go option ensures no up-front costs, no commitment, and 
of course users only pay for the resources they consume. 
This is a little more expensive than a pre-pad plain starting 
at $0.06 an hour for Windows or Linux-based servers. 

Another prcMder is Heart Intern et (www.heartinterne t. 
co.u k) who «s offering Linux hosting solutions from £1199 a 
month. The base package includes BOGS of storage, 1GB 
of memory, but no control panel. Adding a control panel 
CCPaneD pushes up the price to £21.99 a month. 

Making the switch to a cloud hosting solution ts a 
tempting proposition. The flexibility and scalability on offer 
is a nobrainer but current costs cannot compete with 
traditional hosting solutions. 

The question that needs to be asked is ‘ Do you need to 
make an upgrade to your hosting solution at a minute's 
notice?' If the answer is no. then the switch e neat an 
immediate concern, If the answer is maybe, then now 
would be a good time to jump on board to get a 
competitive edge, if the answer is yes. then don't hesitate 
and make the switch now. 
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Richard Stevenson 

Head of Corporate 
Communications, l&l 

wwwJUandJLco-uk 


f 4 f There has been growth in demand for cloud server 
•• solutions over the past year. SMBs are becoming aware of 
developments in IT and the business case for cloud is now being 
understood. Today's cloud servers have evolved to deliver 
excellent scalability and with the help of mobile apps, are 
beginning to become truly intuitive and effortless to contr ol. 

Web pros are now better placed to argue the impact that 

dynamic infrastructure can make to clients'business 

agility and the performance of online pro|ects. 


99 



Claire Lewis 

Head of Marketing, 
Fasthosts 

www.festhfKisjvi.uh 


Cloud adoption 
gathering pace 

Research continues to emerge that suggests trust 
in cloud solutions is growing. Figures from the 
Cloud Industry Forum show that most firms are 
already using cloud solutions to some degree. 



of UK organisations 
use cloud computing 
in some shape or form 


For UK firms, 
flexibility ( 46 %) 
outstrips costs 
savings ( 17 %) as 
the primary 
driver of cloud 
adoption 



of firms using 
cloud services 
expect to 
increase their use 


a Business management has become more mobile, cloud 
and web-based than ever before. Cloud server solutions 
have real resonance with small businesses because they offer 
real-world benefits. Research has shown us LhaL [here is a delicti Le 

willingness among this group Lo utilise cloud solutions for their 
business. However, we also recognise that the industry needs to 
raise awareness within the remaining UK businesses, especially 
the smallest. We also know that small firms still very much value 


ice elements such as the 


assurance of data security and accessibility to a 

provider for technical support. 



96 % 


of firms are 
satisfied with the 
results of cloud- 
based services 


Conclusion 

The numbers show that cloud computing is growing support from ail types of 
UK business. When choosing infrastructure, cloud solutions and related service 
considerations will surety he on the too of the research list for web pros. 
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Great digital mags 

iPad, iPhone, desktop, tablet smartphone. 
Now you can get Web Designer on any 
digital platform you want. 

Web Designer the premier magazine for aspiring online creatives has 
teamed up with Zinio, the leading digital publisher to offer more options for 
getting your favourite magazine delivered In the format you want Imagine 
Publishing :S new partnership with Zinio means that Web Designer is now 
available for PC. Mac iPad. iPhone. Android. Blackberry and Web OS. This means 
wherever you are. you can get the latest cutting-edge practical projects, 
features, interviews and inspirational design showcases at your fingertips. 

Zinio provides the apps (blUy/Kl llt<i reeded to get the best on-screen 
reading experience, while Web Designer provides the unmissable content. 
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Your emails, tweets, forum comments. The social network but in print 


<header> 


This month we're pleased to announce Web Designer is now available on Android, plus discussing Word Press, Flash and Illustrator 


sublet Love WordPress, love responsive design 


From Rebecca Lindon 


WordPress is my Favourite platform for creating websites and 
responsive design is an essential element for any website. What I 
want to do is create a website that works using WordPress and is 
responsive. Do you have any recommendations for a responsive 
WordPress theme? 

Responsive design Is definitely flavour of the month and not 
without good reason. Every new website should work with all 
popular devices and resolutions and responsive design is a very 
good fit. There is the option to modify an existing WordPress 
theme, but buying a ready-made theme negates much of the hard 


work involved and provides a 
tried and tested theme that will 
work out of the box. 

We have seen a few responsive 
WordPress themes that work 
really well. Check out the following, 
you won t lie disappointed. 

SuperSkeleton from 

MakeDesign.NotWarC*nHni« nrt}, Fluid and 

Hybrid from ThemeFit (tlmmflfit mm) and Surplus from 

WP Explorer (wn#>¥nlft«>r mm), 



Web 

Designer 

tutorials 


subjectMy own 

Google Maps 

From Mary Albers 



Discover the latest 
techniques to help 
create Inspirational 
and interactive 
webpages 


Create a 3D logo with 
Google Sketchup 
btUyUei&EUt 


umtM 



Make a WordPress 
theme responsive 
fcrfLlytflwJEliCii 



Create Cinemagraph 
animated gifs from 
video 


I am in the middle of building my 
portfolio site and I want to add a 
map to show where my new 
office will be. But. I want my map 
to be more than just a static map 
that shows the location of my 
office. I want it to be interactive 
and a bit more useful, but need 
some inspiration to help me 
create my solution. Hope you 
can help. 

The Google Maps API is an easy 
to manipulate specification 
giving users the option to 
create custom maps, Web 
Designer is running a Google 
Maps feature In the next issue 
which will give the lowdown on 
how to create a custom maps 
- ideal for your needs. 

There are some great 
examples on the web, here are 
a few to Inspire you. National 
Express ( www. 

stopfinder.aspxX Adopt A 
Hydrant (adoptahydrant.org) 
and Barcelona Go Mobile (bit 
Iv/wEZGHR) . 


Subject Zinio 

subscription 

From Salman Dawood 


I've subscribed to vour mag 
through Zinio. The magazine 
mentions that the attached disc 
comes with various goodies like 
vectors, videos, etc 

I did go through the tutorial 
files on your website, but they 
just have the scripts from the 
tutorials and not half of what has 
been published in the magazine. 
How could I get these additional 
goodies since mine is not a print 
format magazine? 

Unfortunately, the digital 
edition of Web Designer does 
not come with the disc content. 
As you mentioned, the tutorial 
files are available at www. 
webdesignermag.co.uk/ 

tutorial-files 

Subject Creative social 
networking 

FroxnLeo JK 


After I read Sarah Kilgan nan's 
article 'Is Twitter still number 
one?" On pa ge 14 of Web 
Designer #195, 1 decided to give 


her little help in clarifying die 
situation regarding the social 
networking market. Yes. she is 
actually right, despite many 
social networking sites on the 
market today. None of them are 
built for people, and none of 
them provide anything creative 
for people. I would like to offer 
her and everyone else my own 
social networking site for creative 
people like Sarah and all others, 

I am the creator of sobnet.org 
and the main idea we had 
behind this site was to give 
creative people freedom of 
creativity and expression, and it 
is built only by users. 

We do not tell people what to 
do here. We do not talk 
nonsense. We do not impose 
anything on people. The site Is 
created completely by users, and 
not by us. 

Good to see that Web 
Designer s opinion column has 
stirred up some reaction,Social 
networking is very much a 
personal choice and Leo JK has 
taken up the challenge to build 
his own for creatives. Why not 
pay a visit and make up your 
own mind? 
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crowd source 


Join the conversation as it happens on Twitter © @webdesignermag 
Comment on the news and opinion © www.webdesjgnermag.co.uk 
Email the editorial team at 0 webdesigner@imagme-nublishing.co.uk 


subject SharePoint 

designer hosting 

From Mark Slade 


I currently work for a large 
organisation and help do some 
SharePoint admin., setting 
permissions, uploading and 
downloading, page changes 
using SharePoint Designer etc 
and was wondering If there Is 
cheap hosting out there for 
Personal SharePoint sites like 
there is for personal websites (eg 
1 to 1), as I would like to teach 
myself and get qualified in MOSS 
SharePoint 2010. I’ve looked at 
courses and they cost thousands 
of pounds, and think a cheap 
alternative would be to find a host 
that I can play around with and 
set up my own SharePoint Pages/ 
Site to practice on. 


I appreciate that SharePoint 
isn't web design per se, but 
because I know my way around 
Dreamweaver. Photoshop. HTML 
and CSS I think I would pick it up 
fairly easy, and hopefully then get 
access to my Work SharePoint 
Site so I can make it more 
pleasing on the eye. 

SharePoint Designer is a tool 
that rarely touches a web 
designer's radar, but it's good to 
see that our readers are looking 
at alternatives. SharePoint 
Designer Is a Microsoft product 
and uses Microsoft 
technologies. This means you 
will need a related hosting 
option. Try Rackspace Hosting 
{ww w .r a ck s p a c e. c o. u k) or 
Alentus (www.alentus.com). 
these should have what you 
want to get started. 



APPS MAGAZINE 

If you want to know about the latest, coolest apps on the planet 
then Apps magazine is the go to publication, They provide 
trustworthy and respected reviews written by industry experts. 
The latest issue includes. The very best Retina display apps for 
your new iPad and the dassic apps that look great in HD. plus the 
75 Most Addictive Games - The iPhone. iPad arid Android games 
that are hard to put down. Head to the website f www. 
knowyou ra dps.co m) to find out more about the latest and 
greatest apps out there. 


Comments from the Blog 

• Web Designer is always keen to 
hear from its readers, followers 
and visitors. Here we bring 
together a specially selected collection 
from the last month. 

Reaction to the Redesign the 99designs 
homepage competition 

Sarah said: 

So they are getting their site redesigned by multiple 
designers for fust $1,000. Great. Everything about how 
99designs works cheapens the value of design. 

Professional Web Design said: 

Holy crap, this is horrible! 99deslgns sucks, They will have 
hundreds of websites to choose from and only have to pay 
$1000. Way to ruin web design. 

Richard Shoulders said: 

Sounds like a fun challenge! Sarah, do you remember when 
designing things were fun? I used to love cooking until I did 
it professionally,., had to quit because I be came super 
jaded... Food for thought:) 

Nikki said: 

The description on the contest page says It's just a 
one'page design, doesn't seem horrible to me. (And it also 
says they’ll pick three designs so three people will get 
$1,000, the odds are better.) But then I like playing around 
with designing like this, and have had fun with these kinds 
of contests. (My boyfriend's a video game Junkie and I’d say 
my time designing for these kinds of contests is more 
productive than the hours he spends staring at his screen!!) 
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■ The nine per i 
cent of sorrow 


Lubas is creative director at 
Striker, a digital creative agency based 
in the UK and the Czech Republic, 
Working with clients and other 
agencies, his projects cover 
websites, illustrations 
and animations. 



Lubos 

Buracinsky 


Why Adobe may regret the recent revenue model announcement 


I t is fair to say the Apple app ecosystem has taught us that in 
exchange tor using it we ll have to share the revenue from 
our mobile games running on Apple’s platform. Yet the 

recent news from Adobe still comes somewhat as a surprise to the 
Flash community, and a rather unwelcome surprise at that. 

We have learned in the announcement C adobe.lv/HbHj12 j that 
far all Flash games netting over 150.000, as well as using both of 
what are now called the "Premium Features' (hardware accelerated 
Stage 3D and domain memory), the revenue will be subject to a nine 
per cent share with Adobe. It is important to note, that nine per cent 
share only applies to the remainder of the revenues netted after the 
Initial $50,000 Is made. 

So while this initially might look like a hostile move from Adobe 
towards the community of developers who use their platform, I 
think it's worth noting the change is primarily targeted at mid to 
larger size studios that actually makeover that amount. Furthermore, 
when the developer uses AIR to package the game for iOS, Android 
or other platforms, this whole revenue sharing does not apply. So, to 
summarise, this really only applies to developers like Epic Games 
and the like, where their projects make use of the mentioned 
features and! where these games are actually also targeted at and 
suitable far a browser experience. I personally don't know anyone 
who'd be in a similar scenario - either they are developing solely far 
mobile platforms, or their online Flash games use only one of the 
features rather than both. That has been at least the case until lately, 
The recent rise of HIM 15 along with WebGL made It clear many 
developers will abandon Flash in favour of the free, cross-platform 
solution provided toy WebGL etc. So rather than making Flash's low 
level hardware and cross-platform capabilities more accessible and 
desirable, Adobe asks people to license them. 

True, it is only nine per cent. What is that compared to the App 
Store's 30 per cent? But actually, Adobe can’t offer the same kind of 
service a developer gets in those ecosystems, such as being the go- 
to-place for games, hosting, version tracking, sales analysis and 


more, So it proves it may not be such a good deal in the long run 
after all. Certainly game developers with higher ambitions should 
keep these factors in mind before deciding how to go ahead with 
the technology workflow. I know we will. 

Not only could this prove a bad move for Adobe, but also one of 
the last - and potentially fatal ■ events that significantly affects how 
developers look at the Flash platform. It may be fatal In terms of the 
mobile development, but it will most certainly have an impact at 
how new web based projects are approached from now on. 

BrowserQuest showed us that it possible to develop a web-based 
game of a considerable quality using HTML5, JavaScript and CSS. 
Okay, it’s not mind-blowing yet. but It shows It has the potential to be 
pretty complex. Actually, with a combination of toe narrow gameplay 
and the 2D retro graphics it reminds everyone of the old-school 
games, which might have just made their way into the browser area 
years ago using nothing else but Flash. This too, is adding significantly 
to the wave of departing Flash developers, in favour of the native 
WebGL and JavaScript support 

As If It wasn't bad enough for Flash already, these days at Striker, 
any time we discuss a development of a new project involving 
technologies in question, one can almost imagine they are in Harry 
Potter. Mot that we'd try to teach ourselves how to cast spells 
(although sometimes the clients think we know how to do precisely 
that) but it's those conversations about 'he-who-must-not-be- 
named’, which in this case, is 'Flash'. 

If things go the way they have been going since Steve Jobs' now 
infamous Thoughts on Flash’ piece ( www.app I e,com/hotnews/ 
thoughts -on 'flash! I assume In a couple of years time, all those 
flashy (no pun intended) commercial websites that we used to make, 
with eye-popping animation and effects, will all be done using tools 
like Canvas, JavaScript and CSS, The games linked from inside of 
those will be done similarly using HTML5, and those initial Flash 
enthusiasts (like myself) will only push the Flash workflow for the 
aforementioned mobile development. 


The rise of HTML5 and WebGL made it clear many developers 
will abandon Flash in favour of the free, cross-platform solution 
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Pay As You Go 
Advertising 

Advertise on Google. 

Pay only when people click on your ad. 


For most types of advertising, you pay for people to see your ad. With Google AdWords advertising you 
only pay when they cl ick to visit you r website. So you get exactly what you pay for - more customers. 
And because this is pay-as-you-go advertising, you have complete control. 



Control how much you spend 

You can seta daily spending limit and an amount you're happy to pay for people to click 
on your ad. The price Is chosen by you, not us, so you never have to worry about going 
over your budget. 



Control who sees your ad 

Your ad will only appear when potential customers are searching online for relevant 
terms you've chosen to describe your business. 



Control where and when they see it 

You can choose to target your audience by location and time: attract local customers 
during your opening hours or, if you J d rather, promote yourself to a global audience 
round the dock. 


Voucher missing? 


Don't worry, someone in your company may 
have beaten you to it. Track them down and 
make sure they're claiming 


may ^ 


£50.00* free advertising credit 


with Google AdWords for your business. 

No minimum term or commitment. 

Offer only available to businesses In the UK. 


Don't miss out - try it today 

We r re offering £50.00* free Google AdWords 
advertising credit for business users**. There's 
no obligation to continue-you're in control. 

To start attracting new customers today: 


Visit goo glexoajk/ads/start 


Or call OSOO 169 0478 



***Calls to OSOO numbers are Free From BT landlines but charges may apply if you use another phone company, calll from your mobile phone 
or call From abroad. 

♦♦Terms and conditions-apply. Promotional credit can only be used For AdWords accounts that are less than 14 days old by advertisers with 
a billing address in the U-K. Advertisers will be charged For advertising that exceeds the promotional credit. Advertisers will need to suspend 
their ads iF they do not wish to receive additional charges beyond the free credit amount, OFfer subject to ad approval, valid registration and 
acceptance of the- Google AdWords Programme standard terms and conditions, The promotional credit is nan-transferable end may not be 
sold or hartered, In some cases, advertisers who choose prepay baling may be subject to a £10 minimum prepayment hefore Eheir account is 
activated, Any such prepay amount wiill be credited Io Adverliset's account once account is acLivaLed, One promotional credit per customer, 
for Full terms and conditions please visit hrtp-Mwww google rn uk.rariwnrd^-vniif her-termc Google Ireland Limited, a company incorporated 
under the laws of Ireland, with company registration number 36BD47 and registered office address at Gordon House. Barrow Street Dublin 4, 
Ireland. Copyright 2012. Google and Google AdWords are trademarks oFGoogle Inc. and are registered in the US and other countries. 


Google 
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Crowdsource 
your content 


Patrick is the CEO of 99designs, the 
largest online marketplace for 
crowdsourced graphic design services. 

Since its2003 launch, 99designs has 
hosted more than 135,000 
contests and paid out over $30 
million to designers across 

152 countries. Llewellyn 




► 
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Compete for clients you want in crowdsourced graphic design contests 


F ee la nee web designers enjoy a lot of benefits unavailable 
to the average corporate designer - flexibility, mobility, 
fun and creative projects, as well as working on a diverse 
range of brands. But they also suffer major challenges. Two of the 
biggest I hear about are finding new clients and building a portfolio. 

Smart self-promotion, hard work and in most cases, a bit of luck 
can help you beat these challenges. An alternative tool you may not 
have considered is the crowdsourced graphic design marketplace. 

In crowdsourced graphic design marketplaces, a client pays up- 
front and completes a design brief to launch a contest open to all 
designers registered with the site. Designers who feel Inspired, or 
have a concept they would like to work on, submit designs. Over the 
course of the contest - usually about one week - the dient posts 
ratings and gives written feedback to help the designers refine their 
work, The client chooses a winner - or more than one, as is often the 
case - and awards a cash prize in exchange for each set of finished 
design files and IP handover All designs not deemed winners remain 
the property of the designers who submitted them. 

Crowdsourced graphic design marketplaces have their share of 
critics. Some feel these sites devalue their work because not all are 
paid for the work they do. Designers claim that they actually take 
work away from graphic designers. I respectfully disagree. If you 
take a closer look, you'll see they actuality generate million of dollars 
of work for graphic designers and can lead to long-term relationships, 

Finding new clients 

The best way to get new clients is through word of mouth. But what 
if you don’t have enough work from word of mouth referrals to fill 
your working hours? You could buy advertising, but that's expensive 
and doesn't always work. PR is a crapshoot. Social media is hard to 
do well and often ineffective. 

My advice: try entering a few contests. If you have solid graphic 
design skills and take the time to learn how the marketplace system 
works, you'll start to win contests. And winning contests means 
finding new clients. Our surveying of 99designs' design comm uni Ly 
showed that one in every three designers who wins a contest on 
there secures follow-on work with that customer. That's a lot of work 
you never hear about from our critics. 


Here's some more info that might surprise you: many designers 
report earning thousands of dollars per month through a 
combination of winning contests and additional work generated 
through the service. Some designers have even reported earning 
upwards of $10,000 a month. 

And these contests are not a one-way street. Customers don't 
typically just sit back and wait for submissions to roll in after 
launching a contest - they're encouraged to proactively browse 
other contests, identify designers whose work they like, peruse their 
portfolios, and invite them to enter their own contests. Many report 
getting work just from having their portfolios online. 

Building a creative portfolio 

How do you fill your portfolio with creative projects to show potential 
clients if you don't have any great clients to begin with? 

Some would suggest entering design school competitions or 
creating work for Imaginary clients. Those are fine ideas, but they 
won't give you experience making work for actual clients. 
Crowdsourced graphic design marketplaces help you build your 
portfolio with projects you did for real companies, ranging from 
startups to large, well-known brands. Working on projects for these 
clients and receiving feedback along the way, helps you hone your 
design skills - and even if you don't win a particular contest, you'll still 
have work to show on your profile and in your portfolio. 

Again, the proof is in the numbers. Right now there are literally 
thousands of open design contests across a variety of sites. Many of 
these are fun. creative projects that will help round out your portfolio. 
If you browse the contest listings you'll see clients seeking new or 
redesigned websites, logos, mobile apps, eBook covers, buttons, 
banner ads and designs in dozens of other categories. 

Crowdsourced graphic design marketplaces are growing quickly 
and becoming a mainstream way for businesses to get quality work 
done and find the right designer for their needs. At 99deslgns. we're 
already paying out about $1.5 million to designers on the site each 
month, and that doesn't even include all of the money designers are 
making from leads sourced through our service. If you struggle with 
finding new clients or want to freshen up your portfolio with some 
great new work, try a few contests. You won't regret it. 
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Everything you need 
to work better online 
from Fasthosts 

That's not just a web-hosting package, a domain name 
a virtual or dedicated server, broadband, hosted email 
or online backup, It’s technology based in the UK. 

You don't want to keep your customers waiting. 

And by choosing technology that’s based in the UK, 
your customers in the UK will find websites load faster 
Plus, with 24/7 support via the phone and mlIne we're 
here whenever you need us. 

There are many reasons why a UK data centre is a 
good Idea, but, surely, that’s the most Important. 

Plus, with up to 70°/o off* selected products 
there's no better time to buy. 

Find out how your business can work better online 

raw free on 0800 6520444 
or visit www.fasthosts.co.uk 

— - TM 

fcwstHosts 

hosting | domains | dedicated &virtual servers | reseller hosting | online backup 

C Z012 AIL fights f esaved Fasthoscs, and die Fasthosts Idgo ate trademarks ot Fasthosts Internet LU. 
‘offer subject to a minmum iz month contract, Terms & Condtuns appl^, see wetsite for details. 
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BOOKMARKS 

This issue Web Designer has been engaging with some of the 
essential technologies that designers and developers need to 
have in theirskillset. We have selected a broad range looking 
at UX research, how to implement and design mobile 
interfaces, an introduction to the world of JavaScript and a 
selection of must-know development recipes. Enjoy, 


HEAD FIRST JAVASCRIPT 

$39.99 

www.headfirsi:labs.cQfTi 

Q The core purpose of this Head 
First guide is to train the brain 
of users who already have a little 
knowledge in the field of HTML and 
CSS and rake them onro the neat 
plane. The Head First series uses a 
visually rich format that is 'designed for 
the way your brain works’. We're not 
sure if that is the case for everyone, 
but the visual concept makes it's easier 
to absorb on-page information. 

The book is a great starting point for 
those who want to grasp the concepts 
of using JavaScript to create the basis 
of a more dynamic page. It covers the 
basics of programming, how 
JavaScript talks to the browser and 
essential code techniques. 


□□□□ 


ITS OUR DESEARCH 

€28.95 

mkpmri 

Q lt's Our Research looks to 
provide a strategic framework 
for UX researchers who wish to be 
heard by their stakeholders. It offers 
a host of techniques and methods that 
demonstrate how to involve 
stakeholders throughout the process 
of planning, executing, analysing and 
reporting UX research. The 240-page 
Lome is neaLty sectioned into six 
coloured’coded chapters, and each 
chapter is well laid out and follows a 
logical path. There are dozens of case 
studies to assist decision making and a 
fruitful outcome. A nice touch is the 
Inclusion of a series of QR codes that 
link through to a host of related sites, 
and video interviews with UX 
researchers and practitioners. 


DESIGNING MOBILE INTERFACES 

$49.99 

www.areillv.mm 

Q Mobile platforms are slowly but 
surely taking over from the big 
screen, and creating small-screen 
friendly is an art that needs to be 
added to any designer's toolset. 
Designing Mobile Interfaces provides 
practical techniques to help designers 
build UIs that capture the imagination 
and provide an effective path through 
a site or app 

The Pook looks at a comprehensive 
collection of practices that will ensure 
designers compose pages that offer 
the right visual dues and interaction. 

This is a great reference guide and 
should be sitting on the shelf on any 
designer who is looking to create Uls 
for the small screen. 

□□□□ 

WEB DEVELOPMENT RECIPES 

$35.00 

www.prfMprnfl.mn 

O Thls Is a developer’s cookbook 
with forty tried and tested 
'recipes' across a spectrum of 
languages. The four authors 
contribute a collection of popular 
techniques, eg Styling Quotes with 
C55, Organising Code with backbone 
js_and Cleaner JavaScript with 
CoffeeScrlpL The problem is the 
almost random selection of the 
chosen techniques. All the recipes 
reside under a broad heading and use 
a host of tools, which negates the 
books obvious purpose. It r s difficult to 
see how much value it holds. Will you 
use all the recipes or Just need the help 
of a few? This book holds a great deal 
of useful titbits but struggles to bring 
them together in a coherent manner. 
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WEB SERVICES 


Loft Resumes 

From 


k i til 11 iSEf 111 lUtTWjU | 



A resume, or CV.iS 3 ample representation of your 
current skills, education and interests, Typically it r s 
a couple of A4 sheets of black and white text. 
Designers need to be more creative and grab a 
prospective employer or client's attention. Loft 
Resumes offers a collection of beautifully crafted 
templates that demand attention. 


Textastic Text Editor 

From 9/S9.99 


If you need to view and edit 
your source code on the move 
this app is an editor that holds 
the answer, Alongside its 
editing capabilities, users can 
connect to an FTP server or 
even a Dropbox or iDisk 
account to transfer files form a 
Mac or PC. 




Vfltleti to; Sus/j 


The creative process is ' 
not always an easy one, 
and occasionally a 
helping hand is most 
welcome. The Created- 
Mat app is a simple and 
easy to use affair that gets 
the user to select a brain 
size and hit the Go button to 
create a three word solution that 
will immediately start the creative 
juices flowing. 


ItENtRATOR- 
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Mozilla BrowserQuest 

browserquestmozilla.org 

Development technologluK JavaScript WebSackets, Hi MLS Canvas, HTML5 Audio, CSSS, Norloj s 


LITTLE WORKSHOP 


Designer Mozilla and Little Workshop 

www.littleworkshop.fr 

The power and versatility of HTML5 is shown off with 
great aplomb in this retro multiplayer game 


nyone of a certain age 
that can remember the 
games they played on 
their ZX Spectrum will 
feel right at home with 

'****«« 

BrowserQuest. Using the 
latest HTMLSfeg Canvas 
I;; and WebSocket) the 

::::::::: melding of the latest 

browser tech and retro 
gaming is realised with 
ultimate skill and! attention to detail. 

The designers have worked hard to 
ensure the gameplay is smooth within 
the browser with Firefox, Chrome and 
Safari all supported. With no plug-ins or 
other technical additions necessary 
you can jump right into the game. 

Of course the graphics won't win any 
awards when compared to today's 
MMQs, but that's really not the point of 
BrowserQuest. As Paul ftouget wrote 


on the HacksMozilla blog when the 
game was launched: "You play as a 
young warrior driven by the thrill of 
adventure. No princess to save here, 
just a dangerous world filled with 
treasures to discover. And it h s all done in 
glorious HIM 15 and JavaScript." 

As the first HTML5MMO, the game is 
testament to what is possible with the 
new web standard. And of course, the 
code is open source so anyone can see 
how the game was built and learn from 
this experiment. What this site shows in 
abundance is that Flash is no longer the 
only sheriff in town when it comes to 
browser-based game development. 

The 16-bit feel of the game Is superb, 
arid with the collection of web 
technologies that Little Workshop has 
used, you really get a sense that HTML5 
is here to stay and will be stretched 
even further in the future. 


## No princess to save here, just a 
dangerous world to discover. And it’s all 
done in glorious HTML5 and JavaScript §i 



* Tlie scrolling landscape and your own lime 
avatar are rendered in enougn detail to engage 
me player in Uie game 



fl 4 F4727 #7A4552 


abcRBC 1234E67390 
-abcflBC 123^567390 

« Ahiwe, tfip tolmrtoni> 

* GrapnicPlxel is a free font created by Giorgio 
Catalisano and availab le from Dafont.com 
- Advocul is another Tret* font Emm Mleps mat can 
be used for non-commercial purposes and Is also 
available from P at e nt oa m - 
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Got it? Flaunt it! Tell us about your site ) webdesignenaimagine -puhlishin 


LIGHTt&S 




-rHottnm left, clockwise* 

* A? you encounter other player? - 
and there can be many playing at 
□nee - you can open an instant chat 
-As you move through the game you 

are rewarded as your character 
com pletes key tasks 

* Tasks to complete incl ude the 
collection of weapons and other 
useful Items that your avatar will find 
essentia I later I n the game 

-The designers of fl.ro ivserQuesf 
have not forgotten social networking. 
Share your game prog ness on 
Facebook and Twitter 



<JUhivb> 

■ Your aval ar Is automatical ly created and saved 
for you. The g raphlcs are crude,. b ut ad d to the 
charm of the game 


lightbox 
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Know a site that deserves to grace these pages? Tweet us now ) @webdesignermag 


The Big Bum 

www.thebigburn.ca 

D^tf^lopumnl technologies Flash, JavaScript CSS 



Designe ZGM Collaboration 

www.zam.ca 


Flash is used effectively to engage w'th the sites 
viewer and deliver content that educates, without 
resorting to the usual scare tactics 


he risk of tanning salons 
m may not be the most 

:: Hi:: designoriented subject, 

but ZGM has bought Its 
considerable talents to 

■ * 

bear and delivered an 

4 • 

engaging experience. 

As a piece of graphic 
design the site is simple 
yet effective, The almost 
subliminal transition 
from tanning salon to hospital room is 
striking and unexpected: it Jolts the 
viewer into paying more attention. 

Peter Bishop, digital creative director 
at ZGM commented: ‘The site needed 
to be an experience. Using a 
combination of 3D and Flash, we 
created a tanning room that we could 
manipulate and control, which enabled 
us to create an identical hospital room 
to emphasise the similarities. The same 
effect could have been achieved with 


photography, but given the budget and! 
the amount of interaction required, 
modelling the room made (more sense.” 

The site is a Iso a jumping off point for 
a host of information that visitors can 
download. These Include easy-to- 
digest infographics to more in-depth 
medical information about the risks of 
staying in the sun too long, The 
designers have thought out the 
interactive components of the site to 
deliver to the user just the right amount 
of information when It Is requested. 

Bishop concluded: "Key information 
isn't buried in body copy; it's brought to 
the surface, Using infographics and 
hotspots, the content becomes more 
accessible, engaging and, hopefully, 
impactful: This is not your typical 
public service information site. The 
level of engagement is way above what 
you would expect simply because of 
the approach taken by the designers. 


f ! Key information isn’t buried in the body 
copy. Using infographics and hotspots, the 
content becomes more accessible, 
engaging and, hopefully impactful fill 



4 Above* 

• The homepage of the site Is a fully rendered 
image that includes many interactive elements 



*E£D4BF ADflAftSF 4IODOOOO 



flBBCFBA S-5FSD4F #814F2B 


abcABC 

1234567890 

<Abiive* 

* Projrlma Nova by Ma rV S Imorson Studio Is 
availablefrom Ty p e kl tjorn 


22 


lightbox 
































LlGHTtgt 



< Below* 

► Each hotspot reveals a new information panel,, 
which is animated to further engage the visitor 



<Top loft, c ]ackwlse> 

■ To jar the visitor to attention, the 
site transitions into a hospital 
room that bears a stri king 
resemblance to the tanning salon 

■ Hotspots within the homepage 
Image reveal detailed 
information about the various 
health risks associated with 
tanning salons 

■ Stylised graphics are used 
throughout the site to allow 
detailed information to be 
accessed quickly and easily 

■ infographics are used to deliver 
key pieces of information In a 
pon-thneateningand 
lion-judgemental way 



lightbox 
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Know a site that deserves to grace these pages? Tweet us now @webdesignermag 



at atiop.rawbok.corTi 


Reebok 


ITJAKES HISTORY 
■iO WIAKE A CLASS 



<Aliove* 

* The Reebok site ha n ds off to the eCommerce site, but ensures that It hook s the 
viewer with videos still images and audio about most products on the site 



<AbuVB> 

■ The Reebok site doesn't forget that they are 
about selling product, so ensure their ranges 

J u m p off the page with su perh imagerv 


<ai»vb> 

■-Intelligent search is at the heart of the Reebok 
site, wh ich is aval la ble In al I langua ges supported 
by the company 



*&FQ0i7 «F3F3F 


IFFFFFF 



(A5A5A5 *0S07O7 


-Ads and other promotional 
materials rub shoulders with 
products to create an Immersive 
experience for site visitors 
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Reebok 

www.reebok.com/en-US/ 

Developmenttcchnologiu * EP6erver CMS 6 R2. Web Server IIS 75. Code framework ASP.NET AO. HTML5, 
jlQuefy CSS3 



Designer LBi Sweden / Hello Monday 

www.lbisweden.com / www.hellomonday.com 

The new Reebok US site redefines how consumers 
can interact with a brand via search wthin the r site 



t first glance the Reebok US site 
looks similar to other brands sites 
that have adopted the tile design 
approach to present their product 
ranges, However it's when you 
dig a little deeper into the site that 
you realise what a technical 
l triumph it is. 

The two agencies that have 
collaborated on the site have 
dearly played to their strengths. 
Jakob Kahlen. creative director at Hello 
Monday commented: The new website 
redefines the search experience on a brand 
site by introducing personalised! real-time 
search. Unlike traditional brand sites. Raabok. 
c&m encourages users to search." Using 


Apache Solr. the site delivers its content 
accurately and at astonishing speed. 

As the entire site is built on a CMS platform, 
the content can be updated at any time. "The 
central hub in the digital ecosystem is a CMS 
offering a unique user-centred approach to 
the entire system, focusing equally on end 
users and administrators with the aim to make 
the experience fun. fast and useful for both." 
says Per Osbeck, tech architect at LBi. 

Few sites can claim to be as dynamic as 
Reebok's, as each block of content within the 
grid of the site is constantly being updated. 
Whether the site Is viewed on a PC or a tablet, 
the layout may change but the con ten t is the 
same, offering visitors a user experience that 
supports Reebok's core brand values. 


I f Few sites can claim to be as dynamic as 
Reebok’s, as each block of content within 
the grid of the site is constantly being 
updated with new content 1 Pi 


lightbox 


25 





















































I 

< design diary> 

| Hard Graft 



Ka take control of the Hard Graft web 
experience to produce a finish worthy 
of its bespoke products 


Hard Graft originally titled Working Gass 
Heroes, was born back in 2006 with little 
thought for the future and little business 
knowledge. However, founders James Teal a>nd 
Monie.Ka had a dear vision to create honest 
handmade products from natural materials with 
original and clever designs. Hard Graft’s vaiues are 
built upon the fact that real craftsmen in an Italian 
workshop create its products. 

A few years back Hard Graft decided that the 
combination of wool and leather needed to be 
applied to tech accessories. It wanted to use 
htgl>end materials to create unique and cleverly 
thought through designs that offered unrivalled 
attention to detail and stellar craftsmanship. Its 
bespoke signature style is brought to life by two 
young and talented Italian leather artisans and 
their own specialist selection of materials. Hard 
Graft uses its own premium blend of one hundred 
per cent wool felt and premium one hundred per 
cent vegetable-tanned Italian leather. To 
compliment Hard Graft's obvious offline talents, its 
online section is kept in-house. James Teal, 
designer and co-founder, explains. "We nave been 
designing and building our own website in-house 
ever s^nce we changed our name to Hard Graft 
back in 2CG7 it ail started as a pretty simple online 
shop in a classic layout. Over the years the website 
grew, like us, and like our products. Design is to 
me. next to quality, the most important part of our i 
job, doing it in-house was the easiest, most honest! 
way. I think we would have driven an external 
agency crazy - we are perfectionists.' 


i vwc nmvidedthe starting point for the 

aft sells products, and the action 

iteNo^opwtodow,]UststraigOT^ 

■uneoaoe With mis mood image, cq ^ them' 


Desig n diar 

Ride the/levelopment cycle 


project i harclgraft 

Company 1 hatdgtalt (in house) 

Web I www.harclgralt.<:om 

Tltis issue: The bespoke product designers 
explain why their perfectionism led to designing 
and developing their webstore in-house 


hard 


In-house duo James Teal and Monie. 
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Hard Graft | 



i' pi 

Choosing theright backend for the 
Hard Graft webstore was critical to 
its success, and after a lot of 
research. Shopify got the nod ahead 
of the old eCommerce platform 

Teal "With our last website we had Magento as the 

online shop backend. As designers we didn’t like the 
look of it at all. Everything seemed so clumsy, so we did 
a fair amount of research to find a better platform. Since 
designing and programming our entire website in 2007. a 
tot has changed and Luckily there are pretty good online 
shop platforms available now. We settled on Shopify and 
implemented our new designs, but this was the biggest 
challenge as Shopify has a few limitations, like maximum 
image sizes and its own language We had to find creative 
solutions to achieve the perfect layout and functionality. 
However, multi-currency handling and mufti-browser 
functionality ueeds ongoing maintenance - we're still 
fighting a bit on that challenge. 


A straightforward design process powered 
by Photoshop mock-ups helped visualise the 
Hard Graft concept. A revisit after a couple of 
days away from the design ensured the right 
option was selected 


Teal: “The design process was pretty straight forward. First, draw up 
ideas in our Moleskine, discuss It together with my partner Monie.Ka 
and then create some Photoshop mock-ups. We visualised every single 
page first, slept on it for a few nights, and if we still thought it was a good 
layout we stuck with If 


Teal: "Launching the website was pretty scary. When we did the 

previous Magento store, the site kept crashing every time we sent ouL a 
newsletter. So we wanted to make sure it kept up with the traffic. Apart 
from our newsletter, we've never done any advertising. Thinking back it 
was a pretty smooth start, a few minor errors here and there which we 
fixed on the go. Our products and designs are geared towards the 
creative professional who has an eye for quality and loves details and 
individuality - they can see that we put a lot of effort into the website 
and I would like to think that they really appreciate it. Even though we 
are product designers, we proved that you should follow the design 
through to the packaging, branding and. well, your website. Everything 
fits together perfectly" 

design d iary_27 
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Internet 

Case 

Study^ 


Mottal 


developer! 


Adrian Callaghan I 


I Ilenia CiopolaFIM ;’ 
n'Qfiuction manager] 


Angelo Wellensl 


Viissilios Alexiou 
- creative director 


Digital production house Less Rain reveals 
how it creates worlds that are less predictable, 
how the weather influenced its name and why 
Flash is still the best tool for creating truly 
engaging multimedia experiences 

who Less Rain wlial Digital production specialist delivering rich 
interactive experiences where 5 Calvert Avenue, London, E2 7JP 


::::::: 

::::::: 


iliii 

iiiii 


::::: 

::::: 



ess Rain is a digital production 
house, specialising in 
delivering rich media 
interactive experiences 
across platforms. It was 
IS; ***** formed by Vassiiios Alexiou 

and Lars Eberie in 1998, alter 
completing M iddlesex 

::::::::::::: University's MA in Design for 

Interactive Media. 

Less Rain's first press release gives an insight into 
its ethos as a company: less' is a byword for the Less 
Rain ethos. We create worlds that are less predictable 
without being impractical devising solutions that are 
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front-end develoi 


James HunFJJf* ■■■ 
front -end developer 


Jf Luis Martin ez y > 
front-end develop er 


| | \ I Da ve Cu rtis J / | 
senior production manager 


<pro fil«> 


WINNERS &F1NAUSTSQ 


desirable and intuitive. By creating smalt perfect 
worlds, our goat Is to deliver digital experiences that 
are more about Intriguing exploration than off-the- 
shelf effects’ 

Less Rain operates in information., entertainment 
and participation spaces, creating interactive content 
for a variety of devices, games, corporate and 
consumer websites, applications and physical 
Installations. Their work Is characterised by strong 
concepts, engaging Interaction and performance- 
friendly implementation. And Less Rain has been 
rewarded for their hard work with awards from DS AD, 
BAFTA. C annes Lions, Clio. One Show, RIM A, Webby, 
Flash in the Can, FWA, Creative Cirde and the Lovies. 


Less Rain is a long-standing member of the digital 
design fraternity, with over 15 years' experience. 
Founder and creative director Vassilios Alexiou gives 
a brief insight to how the agency got together and 
stayed together. 'When we got together, we had one 
thing in mind: to engage via playful interactivity, to 
captivate people via unusual concepts and interfaces. 

‘At the start we did n ot have a ny c lients - we just did 
what felt right and talked about It in the hope that 
some commercial work would come through. In late 
2000 we released 'Eyes Only', a CD-ROM that 
pretended to come out of some academic search for 
extraterrestrial life and allowed you to connect to a 
series of fake webcams and capture stages of on¬ 


screen phenomena that we had choreographed to 
happen at certain times. 

Today we work mostly on commercial projects, 
but the aim is pretty much the same: to suspend 
disbelief with original, bespoke work, and to do it in 
such a way that the technology is invisible.* 

The name of an agency immediately makes an 
impression, Mexico tells the simple tale of how the 
agency name came into being. 'We did not want a 
name that Immediately says ’digital’, so we avoided 
using words like level, floor, unit, sectioa etc. It was 
raining a lot at that time, plus we all share the design 
aesthetic of less is more' - using less elements, 
working well together to create a bigger impression. 


pro fife . 
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| Less Rain 




Less Rain timeline 


Established 1996 

Founders Vassfllos Alexiou, Lars Eberle 


Less Rain launches 
online graffiti website 


Less Rain starts as a 
core team of two 
people, after 
winning, the s tudent 
1997D&AD award. 


It releases a number ol 
non-commercial projec ts 
and wins the 1999 
Macromedia Conference 
People's Choice Award. 


The Red Bull UK 
account is won. 
along with a RAFTA 
for experimental 
project 'Eyes Only'. 


Less Rain crafts! 
shake you'for 
Mitsubishi and wins 
gold at the One Show 
Interactive in NYC. 


Creative Review 
showcases the 
company as part 
of Creative 
Futures 98. 


if The production of ‘Insanely Driven’ 
involved two teams, live-action and digital 
and about 35 very special people i§ 


"We were lucky that the URL lessrain.co.uk was 
available, otherwise we would probably have had to 
rethink the name!* 

Alongside the name, its web presence is one of its 
most important presentation cools to the rest of the 
web. Alexiou gives his thoughts on the importance of 
Less Rain's very own site. The website does a lot of 
the work but It Is not the only presentation tool. We 
have bloa.Iessrair.com that follows our activities In 
more detail as well as Facebook and Twitter, 

“Keeping it up to date is quite easy - we have a very 
simple custom CMS that publishes information on the 


mobile (HTML), tablet (HTML) and online layer (Flash). 
We are updating it with new projects - all other 
newsworthy stuff is channelled via our blog." 

With a long-standing presence in the industry 
finding new clients is obviously one of Less Rain's 
strong points, Alexiou explains how the agency gets 
most of Its new clients. "Most of our new business 
comes through recommendation. We try and do our 
best work every time then we talk about it and submit 
it for awards. We will go and present to the agencies 
we respect, but we are not very aggressive - there is 
not enough time, as we are always busy! 


'But we do target specific kinds of work - at the 
moment it is interactive films, and in general 
interactive stories that live online but also as apps, We 
are also aiming to do more trans-media work." 

Less Rain has worked with some very well-known 
big brand clients. We asked Alexiou if there is any type 
or size of project that the agency will not take on. "We 
are very open to the kind of projects we take on. We 
like to take on new challenges and enter spaces we 
are not naturally very comfortable in; we learn this 
way and develop new skills. 

“We tend to not take on very small projects, as we 
know that in the end in order to be happy with the 
work ourselves we will end up doing much more than 
what we are paid for. 

Then there is the odd dient that we do not really 
wish to work with again, but often this is mutual, so 
there are no hard feelings. We try to 'screen 1 our 
clients as much as we can, especially when we are 
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Less Rain 



we will go 
/e design 


industry Vassilins Alexiou, 
***„_■*■, creative director/ 
lllblgill tounder Less Rain 

w If there is LJion^li 
budget, we night go for 
two code has 3S; one using 
Flash and on* 1 HTML. But 


in most cases 
forarespon: 
that’s done 



I 'Red Bull FUghtlab' is 
released and Flash In 
the Can, Cannes, Clio 
andBIMA awards won. 


The interactive film/ 
personality test/ 
game that is 
'Insanely Driven' 
goes Live. 


I ® [Less Rain is] still very much Adobe¬ 
centric for rich-media experiences §§ 


asked to do a pitch. We ask them how they know us, 
or what project they like from our portfolio - we want 
to know that they really like us and are not Just trying 
to find an extra' company to lake part in the pitch" 
Projects involve a host of personnel. Atexiou and 
senior production manager, Dave Curtis, give insight 
into the typical roles and how development takes up 
a large part of the process. VA: 'We organise projects 
around a production manager, who 'owns' the project, 
They work with the creative director who makes sure 
there Is a vision for the project, does the LIX, manages 
the team internally and interfaces with the client. The 
rest of the team for a typical digital project is usually a 
designer, a 2D/3D animator, two or three front-end 
developers and a beck-end developer. 


"Sometimes the project is huge, in which case we 
double or quadruple that. The production of 'Insanely 
Driven’ - mamJnsanelydriven.com - involved two 
production teams, live-action and digital and about 35 
very special people." 

DC: "In general, the most time-consuming part of 
whatever project we are doing is always development 
- but good preparation before any code is written 
always minimises the amount of time required. 
Rushing Into writing code always causes problems 
later on In the project." 

Projects are always driven by the tools used across 
an agency. Alexiou and Curtis give a rundown of the 
design and development software that sits in the less 
Rain toolset VA; "We are still very much Adobe-centric 


for rich-media experiences, using Adobe AIR to deliver 
our work online and as applications. But with websites 
we will go for HTML, CSS and JavaScript. We will 
always work with the technology that is most 
appropriate for the project.' 

DC; “For design, it’s always the Adobe Creative 
Suite. You just can’t beat the power and usability of 
Photoshop, Illustrator, etc I to waver, for development, 
we use a variety of tools, favouring FDT for our Flash 
work, OmniGraffle and Axure for our UX, and tools like 
Charles or Firebug for testing. To help communication 
among the team, as well as the client we love using 
Basecamp, It really helps to have everything in the 
project In one place.' 

Flash Is a controversial technology that has recently 
seen itself marginalised more and more by many web 
designers. Alexiou and Curtis explain why they believe 
it is still an important platform for creating rich, 
interactive content. 
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| Less Rain 



# # Flash provides us with the tools to 
develop rich but engaging content - which 
many other technologies can’t match ill 


VA: 'When it comes to truly engaging multimedia 
work, Flash and Adobe AIR are still the best tods to 
work with, Adobe has been very bad in its PR and 
Google very good, but the truth is HI MLS has still a 
bit to go. Why create a mediocre game with HTML5 
when you can create an amazing one using a more 
appropriate technology?" 

DC: "Flash has been the backbone of interactive 
development for many many years. It provides us 
with the tools to develop rich but engaging content - 
which many other technologies can’t match. There 
are some other excellent technologies out there 
(Unity 3D and Adobe Edge are two great tools worth 
checking out). The problem lies in that these tools 
each only provide part of the solution - and greater 
time and effort is required to tie them together into a 
seamless user experience.' 


While Flash may have its place in the design and 
development hierarchy, HTM15,C$S3 and jQuery are 
the current golden boys. Curtis gives his thoughts on 
what they have to offer, and the flaws that current 
code-based web technologies have. These 
technologies are opening up the possibilities to 
develop engaging content outside of Flash. They 
simplify the ability to provide interactive, cross¬ 
platform solutions. The main problem with the web is 
that interactivity is still based on pages of content. 
This restricts the usability of the end product - with 
the end-user constantly loading new content from the 
web. causing delays, which breaks their flow. The 
increased use of apps on mobile devices, but 
increasingly on TVs, is increasing the customer's 
awareness of engaging interfaces and highlighting 
the flaws In current code-based web technologies." 


Driving traffic to a site is always a crucial aspect of 
its success- Alexiou and Curtis explain how social 
engagement is an integral component of a project, 
but sometimes the heights of its potential is not 
always realised. 

VA: 'Driving traffic to a site is more important than 
ever - you need to cut through. But due to the fact 
that as a production partner we are not always in 
control of the PR budget, we often see outstanding 
pieces of work not realising their full potential" 

DC: "Social engagement should be an integral part 
of any online, or mobile project. But you r d be 
surprised how many projects are briefed In without 
any social engagement. Yes. we can post to Facebook 
and Twitter, but social engagement is a two-way 
activity. The client needs to engage with their 
customers online in order for the customer to engage 
with their brand. We always try and think of solutions 
to engage with the social network, and Include It In 
clever ways In the projects we do. Our recent project 
for Red BulT Paper Wings allows users to design a 
3D paper plane, and launch them towards Salzburg 
where Red Bull hosts its annual paper plane 
competition. Any social engagement boosts your 
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Less Rain 


plane closer towards the destination. The more you 
are engaged, the quicker you fly* 

Smartphones and tablets are now as important as 
the desktop experience. Alexiou talks about how apps 
and responsive design are key components In today's 
design process. 

In terms of apps. if there is budget to create two 
separate apps (iOS and Android) then we would go for 
two separate code bases - and utilise the benefits of 
each platform. But if we were looking to release 
something online, on tablets and mobile, we would go 
for a single code base using Adobe AIR. 

In terms of websites, if we are looking to create a 
strong user experience and not just a portfolio 
website, and if there is enough budget for it we might 
go for two code bases: one using Flash and one using 
HTML. Gut in most cases we will go for a responsive 
design that's done in HTML" 

People are the force behind any creative agency. 
Alexiou reveals what he looks for In a prospective 
employee. 'Personality is a key factor - sometimes 
more than skills. We like people that are easy to work 
with, confident and happy to be part of a team. 

"At the same time, we are looking for problem- 
solvers, people that love challenges and are motivated 
by the end result. You are only as good as your last 
project so everyone makes sure that the final product 
represents us all. 

'Focus is definitely key ■ sometimes you get very 
talented people that spend a lot of time checking out 
Face book or Skvping their mates, ending up staying 
late in the office. We prefer focused people that come 
on time and leave on time." 


less rain 4 


FOUNDERS 

_Vassilies. Alexiou. 

YEARFOUNDED . 

LarsEberle 
_____,1998 

CURRENT EMPLOYEES... ,. 


LOCATIONS 

......I .orwim.IIK 

Berlin, Germany 

SERVICES 


> Interactive films 

> Gaines 
>Apps 

> Websites 

> Installations 
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KEY PROJECT 


Insanely Driven 

www.insanelydrivenxom 


a&wl'i 


EL 


M 


Produced by Less Rain, and bui It for Euro RSCG 
and Reckltt Eenckiser, with the help of Dr Tomas 
ChamoiTO'Premuzic, professor of Business 
Psychology at University College London, 
“Insanely Driven' is an interactive experience that 
uses dramatisation to engage users and reveal 
their true chai acters through their choices. 

Insanely Driven is packed with entertainment 
value, combining action, comedy, drama and 
science fiction. The experience is in equal parts an 
interactive film, a character prof I ling application 
and a game, and Is being delivered across mobile, 
tablet and on line platforms. 

The brief for the project was to build an 
interactive experience following extensive 
internal character profiling at Reckitt Bencklser, 
which revealed that many of Its emjtfoyees share 
similar personality traits; eg ambitious, cook 
headed, fearless and direct, 

It alms to drive awareness and understanding 
of the culture behind Reckltt Eenckiser (RBj, a 
global leader in health, hygiene and more. 


Less Rain proposed an interactive film, as a way 
to engage Its users, suspend disbelief' and get 
some truly honest responses. The agency were 
responsible for the live action as well as digital 
production, working with a multidisciplinary 
team of around ,30 people to write, design, shoot 
and edit the film parts. 

The Insanely Driven experience takes place in 
a highly suggested set, and is centred on three 
versatile actors that play a multitude of roles. 
Players are asked to make 16 choices that are 
embedded In the narrative in a very Intuitive way 
- this involves choosing an outcome, person or 
object from between two or three options. Each 
choice is rated in terms of ambition, cool- 
headedness, fearlessness and directness. 

Players race against time and need to react fast 
In order to reach the end goal in time. At the end of 
the game, the user Is presented with their 
individual profile as well as comparative data 
according to age, country of residence, profession 
and Facebook friends. 


profile 
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Tnmblr blogs 

I'he Tumblr platform now has nearly 53 million blogs. Here we choose six tumblelogs 



Put This On 

www.nutthison.mm 

D^vcilopuiPiit platform 'iimblr 

Put This On is a blog that takes a look at style and finds 
Lbe almost Ideal companion with iis neat grid-like 
theme layout. The bright red,''orange logo offers an 
immediate identity and lends itself to the overall colour 
scheme. The two columns keep the page 
uncomplicated and crisp clean font titles are very 
much in keeping with the content. 


XXX 

ww w.g ratuitousty pe.com 

Development platform tumblr 

This blog verges on minimalist, with a sea of white 
space making its presence felL. A triple X text header 
acts as an intriguing focal point and instantly directs 
the viewer to the content. The individual posts are 
unpretentious title. Image, text combos that use a 
compelling font, interesting images, industrious 
intros., and bright pink links to get viewers reading. 


CheatSheet 

cheateheet.tumblrcom 

Development platform I umblr 

The colour combination of red. black and white and clean 
sans-serif fonts give this blog Its obvious impact. The logo 
is an effective page header that gives a focus to the 
content. The layout is typical threecolumn, but the 
functional and effective use of images and text add 
interes L The inclusion of an unobtrusive back to Lop icon 
is a welcome touch that adds usability to the aesthetic, 
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<l)log beautifiil> 

Tumbjr blogs | 


seen^orsijggest Tweet a 140 with your blog’s address directly to % @WebDesignerMag 
a theme Email vour suggestions to fri webdesigner@imagine-publishing.co.uk 

that showcase just how impactful the simple art of microblogging can be 





A10UT 
CATEGORIES 
TWITTER 
MADE SHOT 
CONTACT 


It a odour strikes a dhc*d. the 
accompanying hexadecimal 
code-can be added to a palette 
^ dcolQurs.foru&eln^iy A 
pagecteaign, 


The style and set up of the blog 
i means that the aesthete is the lev, 
L and selecting the Random link j 
IL chooses a sinyle post to 
ong^g^ the i.^r, 


f i Pretty Colors is about as simple as it gets, with a plain white 
background and single posts boasting a big block of colour §§ 


Hrrrthrrr 

www.hrrrthnr.com 

Development platform [iimblr 

The header combines pastel colours, simple 
photography and hand-drawn fonts tor instant 
impact. The home-made elements permeate 
throughout Detailed touches help create the 
ambience of the site and individual posts. Bold 
photography and images accompany each post to 
encourage the viewer to explore further. 


Pretty Colors 

nrettvcolors.hjmblr.TOm 

Development platform I nmblr 

This site is about as simple as it gets, with a plain white 
background and single posts boasting a big block of 
colour. The title uses the ever popular Helvetica font 
family swapping out its default colour only on rollover. 
Each colour block is accompanied by its hexadecimal 
code and that's about lb but its simplicity is also the key to 
retaining its interest 


Beauty 

-beauty.tiimblr.cQm 

Development platform lumblr 

There is nothing extravagant or pretentious here but 
a simple single-column blog that makes great use of 
images and text. A simple floral repeating 
background provides the wallpaper for the page and 
adds instant interest On a more technical level, a 
fixed logo and menu stays in place while the main 
content scrolls through a stream of accessories. 
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How hacking WordPress and other 
open-source CMS’ works ys^r 




































Avoids basic server security 


ABOVE ' The path a hacker wl II take in targeting an open-source system 


v ul ne ra bi I Ities that can lead 
to bigger Issues and ensures 
you have the support you 
need to react quickly should 
anything go wrong. 


SELECTION OF POPULAR 
OPEN SOURCE SYSTEMIS] 

t 

ANALYSIS OF OPEN SOURCE CODE 

l 

' IDENTIFY IF VULNERABLILITIES 
HAVE BEEN FOUND 


IDENTIFY TARGETS 
USING SELECTED 
OPEN SOURCE CODE 


DEVELOP AUTOMATED 
TOOLS THAT EXPLOIT 
VULNERABLILITIES - 


IDENTIFY AVAILABLE 
PLUG-INS WITH 
VULNERABLILITIES 


DEVELOP MALICIOUS 
PLUG-IN TO OPEN 
VULNERABLILITIES 


H acking any system requires effort 
whether it h s a website or nuclear reactor 
facility What makes targets attractive to 
hackers is often a mixture of prestige, 
accomplishment and financial motivation. 
When It comes to your open-source 
projects, the chances are you aren’t 
working on anything as prestigious as 
Faeebook or something that would have 
the same financial rewards as hacking 
HSBC bank, but you would be considered 
a much easier target and therefore attractive on the 
basis that your foundation code is open-source. This in 
itself means that website developers and designers who 
rely on open-source systems like Word Press, Joomla 
and Drupal need to be more cautious and aware of 
security issues that may have otherwise gone unnoticed 
in closed-source and bespoke systems. 

Attacking an open-source system Is much easier than 
many would think. Many professional hackers specialise 
in targeting open-source systems, with many of these 
specialists In targeting just a handful of the more popular 
systems. Once an open-sounce project reaches a critical 
mass of users, it becomes viable for the more criminally 
inclined hackers with a financial motivation to 
develop specialised methods and tods to target 
websites based on a specific set of open-source 
code. The diagram to the right shows how a 
hacker may develop their malicious code: 

The solution to the security problem is to take 
pre-emptive steps to stop any potential 
vulnerability from succeeding. This article 
shows the steps you can take to make your 
open-source systems more secure - 
regardless of whether you are a WordiRress 
Linkerer with no programming skills or an 
experienced programmer developing 
open-source plug-ins of your own. 


NON TECHNICAL SECURITY MEASURES 

For the most part, the majority of security 
issues can be avoided or resoived with 


ATTACK 
HTML FORMS 


INJECT CODE TO 
COMMON/KNOWN 
CODE SCRIPTS 


ADD NEW 
CODEFILES 


simple measures without the need for programming 
knowledge. With suggestions from Debs Williams, 
freelance Internet marketer at debbidoo ( www. 
debbidoo.corm and a perfect example of how a non¬ 
developer can take measures to ensure security of 
Word Press websites, we look at what you can do to 
improve the security of your WordPress and other 
open-source systems without programming skills- 


SELECTING A GOOD HOST 

Whether you consider yourself to be an expert or are 
new to creating wellsites, having the support 
your hosting company and their ability to gee 
things right first time will avoid many security 
issues happening in the first place. Premium 
level support comes at a cost, so consider 
this carefully before opting tor the cheapest 
web host you can find. 

Williams tells how a previous host may 
have been a key contributing factor to 


WordPress website that was repeatedly hacked. - l hadn't 
used the host before and haven't used them since. I tried 
to visit the website one day, and them was a browser 
message saying the website was dangerous and had 
been blocked. Although they identified and removed 
some dodgy files mat were placed on the server, the 
same issue kept happening several times • what the 
cause was is unknown, but what I can say is that I've 
since hosted WordPress sites with at least 1 
other hosts and have had no security issues 
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SEND SPAM EMAIL STEAL EMAILS AND STEAL DATABASE ALTER DATABASE 
SERVER DATA INFORMATION INFORMATION 

RE-DIRECT STEAL INFORMATION SNOOP ON 

WEBSITE USERS FROM WEBSITE USERS WEBSITE USERS 


k k PEOPLE WHO 
WORK ON OPEN- 
SOURCE 
SYSTEMS NEED 
TO BE MORE 

CAUTiousyy 
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WORDPRESS SECURITY 


SECURE YOUR 
PASSWORDS 

GENERATE HASHED PASSWORDS FDR 
EXTRA LOGIN PROTECTION 

A mistake that’s often made is the 
use of easy to guess passwords. 

Whether it’s for a database 
connection or access to your admin 
area, hackers can easily crack 
passwords by brute force in which 
they use a dictionary of the most 
commonly used passwords. This 
method of breaking Into your 
database or admin area can be fully 
automated, meaning that a hacker 
needs only to spend a minimal 
amount of time to activate their 
attack and wait to see the results. 

For your admin area account 
loglnCs), use passwords that 
combine numbers that are unique 
to you and can't be guessed, but at 
the same time are memorable to 
you. An example could be: 

* Current Date + Pet Name + 

Last ^Telephone digits = 
230412Tigger389 

For actual database connection 
accounts, you want to use 
something that's even more secure 
than the above - this is the database 
access your code will use when 
accessing your database, so 
memorability for frequent use isn’t 
as important. For better security, 
use a hash generator to encrypt a 
chosen password, which will ensure 
that it can’t be guessed. Try www. 
md5hashaenerator.com to create a 
hashed version of the password we 
have created above: 

* Original Password: 

230412 Tigger389 

■ Hashed Password: 82b781733 
OB696c7141a972e4deb3641 

To properly secure your password, 
an original password that is secure is 
still required to ensure hackers can't 
guess your hashed password by 
using a database of weak passwords 
to generate their MD5 equivalent. 
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whatsoever" Although the cause of Williams' issue could 
have been anything, the chances are it was down to an 
unsafe plug-in or theme used in the website - something 
that the right server settings can stop. 

Another downside to cheaper web hosting is that 
they use shared servers with other websites. This Is in 
order to reduce their individual hosting costs and can 
have some negative consequences for the security of 
your site. The majority of risks associated with shared 
hosting can be eliminated simply by ensuring you have 
the right setup, which is dependent on the technical 
skills and competency of your host's server 
administration team. Issues relating to shared hosting 
that you need to make sure are addressed by the 
chosen host include: 

■ Ability of scripts to access hosting space 

outside of their own domain. 

-This vulnerability would allow a malicious 
script or plug-in installed by another website 
owner using your server to affect your 
website, by si m ply f i nd i ng yo ur website 
location on the server and writing copies of its 
code to your hosting space - and even Into 
your Word Press scripts. 

-The same vulnerability would also allow a 
malicious user of the serverto scan and access 
your web hosting files. This could allow them 
to steal anything you are hosting, including 
documents and code files that ha ve access to 
details of your database. 

* Access to your database. 

* It could be a brute force attack or by using 
details stolen directly from your PHP scripts, 
but either way, other websites on your server 
can access your database if they are able to 
acquire the database username and password, 

• Email access. 

■ A server that hasn’t been configured to stop 
users accessi ng a reas they sho uldn't a Iso 
means that malicious users and scripts can 
access emails stored on the server, which 
includes yours. You could eliminate this risk by 
using a third-party email service provider such 
as Google, who offer a much better interface 
and more email storage. 


BENEFITS 

Makes it harder for 
malicious code to 
tamper with your 
WordPress database 
content. 


• Email sending. 

* Another risk concerning email is that malicious 
scripts that have access to your site can send 
spam email. This could be as a result of code 
being Installed onto your hosting space or 
another website on the server sending spam. 
Either way, because your website shares the 
same IP address, the chances are that your 
genuine emails will often get marked as spam 
by email providers such as Hotmail and 
Google, because the IP address of your server 
has been blacklisted. Before signing up to any 
shared hosting, this is a question you should 
put forward to your host. 

NAMING YOUR TABLE INSTALLATIONS 

Word Press has a useful feature as part 
of its installation process that allows 
you to define prefixes for the 
database table names it uses. 

This feature is in WordPress to 
allow your installations to share a 
database with other apps and 
bespoke code you have developed, 
but is also very useful to use from a 
security perspective. As described at the start your web 
apps become better protected against malicious code 
the more they are altered. Simply changing the default 
database table prefix from Wp_' to something like 
'myBlogITOIJ means that it will be harder for malicious 
code designed to attack your WordPress database 
Installation to succeed; although keep In mind that this 
will only make it harder for the hacker and will not stop 
well-written malicious code from succeeding. 

For those of you considering using this for existing 
WordPress installations, you can manually update your 
database table names from PHP MyAdmin, and then 
update your WordPress configuration file (wpconfig. 
php) from your WordPress installation directory. Search 
tor the following In wp-conflg.php: 

001 $table_p refix = 
and replace with 

001 $table_prefix = "[Your prefix here].’; 

Other open-source systems that have been coded to a 
good enough standard will have similar settings - 


* ibrdFress [ 

’acabase Table prefix. 




* prefix. QftJ 

'e nultiple installation* in one database if yot 
■V numbers, letters, and underscores please 1 

1 qiv 

e each i 

i unique 

*table_prefix 






ABOVE ; The default WordPress database table prefix l$wp_, Changing the prefix to a custom option makes it harder to hack 
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ENCODE YOUR CODE 


— By using one of the PHP encoders such as ionCube (www innmhp mm), you 

DEM E PTC are to convert your code from PHP and HTML files to compiled 

DLlVLrl I ^ executable files. The main advantage of this for security is that your website 

Stops your code from j 5 no logger relying on PHP files that can be altered - the executable runs in 

being altered by third exactly the same way, but is compiled as machine language, so attempts to 

parties* malicious add ex t ra code to existing scripts by malicious plug-ins will fail. Obviously 
scripts and you wou |cj| need to keep a backup on your own computer of your original 

plug-ins. php C 0 C j e p ecause complied code will not be updatable if you need to make 
future changes. 


O II I ITinM.Keep m mir| d that encoding your code will not protect you 
UHU I IUI ".from plug-in sand other types of scripts you ha reinstalled that 
are designed for devious activities, so although a powerful asset in your security, 
encoding your code is only one part of the puzzle. 




ABOVE : Cheek the ratings of plug-ins before you use them 




kk IT’S NOT JUST PLUG-INS DESIGNED FOR 
MALICIOUS PURPOSES THAT POSE A THREAT 
TO YOUR WEBSITE f V 


whether it's like WordPress, in which table prefixes can 
be defined by accessing the backend system settings, 
or where the system itself can define fuly bespoke table 
names for everything it needs, 


CHECK YOUR THEMES AND PLUG INS 

It's not just plug-ins designed for 
malicious purposes that pose a threat 
to your website. Plug-ins designed 
to be genuinely useful are 
sometimes coded in a way that 
makes It easy for hackers to 
abuse and access your website in 
ways that were unintended. 

One example of how genuine 
plug-ins can accidentally introduce 
security issues to your website is TimThumb, 
a script that was developed for the WordPress theme 
Mlmbo Pro to allow for automated Image cropping and 
resizing. TlmThumb was found to be highly useful for 
users of WordPress and was subsequently adopted for 
Inclusion in many other WordPress themes as well as 
other open-source systems. The problem with 
TimThumb was that it originally didn’t validate the types 
of files being uploaded through It and so allowed for 
PHP and other scripts to be loaded. This meant: 


• There was a huge vulnerability in WordPress 
websites and open-source systems that were using 
themes that included TlmThumb, 


• Many users with themes using TimThumb were 
not aware how their website was affected, and this 
has resulted in reported claims of 1,2 million 
websites being affected. 


• Hackers would be able to identify vulnerable 
websites si m ply by sea rc hi ng for Word Press 
websites using themes that were known to use the 
TimThumb script. 

* The standard code structure of WordPress meant 
that hackers could produce automated 'bots f that 
scour the Internet looking for vulnerable websites 
to attack. 


The result of the vulnerability meant that many website 
owners were caught unaware of the vulnerability and 
had their website injected with anything from phishing 
code designed to steal information such as user login 
and credit card detail through to addition and injection 
of server-side code designed to hijack the server and 
send spam emails - or worse. 

Williams tels how she minimises the security risk to 
her WordPress websites by being selective with p-lug-ins: 
I’m actually quite careful with pbg-ins* only going for 
those with the best reviews if possible But nothing is 
foolproof, especially when things are open-source and 
anybody can muck about with them!" 

Key actions to take when using any plug-in or theme 
with your open-source system include 


• Check the reviews and scores given to all 
themes and plug-ins you a re considering using. 

* It’s very easy to do this for plug-ins 

right hand column on the download page of 
your desired plug-In to see the number of 
reviews and average rating, keeping in mind 
the more ratings a plug-in has received the 
more trusted the rating average will be. 

• Make sure you download your plug-ins from 
reputable sources. 

* Yourfirst port of call for WordPress plug-ins 

extend/plugins. 

• Use Google to search for what other WordPress 
users are saying about the plug-ins you are 
considering using. 

* Do specific searches relating to the plug-in and 
security vulnerabilities such as TimThumb 
plug-in exploit 1 . 















WOflOPRESS SECURITY 


k k AS WORDPRESS IS SUCH A POPULAR 
BLOGGING PLATFORM, IT HAS BECOME A 
TARGET FOR HACKERS TO EXPLOIT I » 


* Continue this on a regular basis for every 
theme and plug-in you use after you have 
completed your Word Press website, to ensure 
your website isn't at risk from being affected 
by newly identified vulnerabilities. 


* Avoid going trigger-happy with plug-ins, 

* The more plug-ins you use, the more chance 
there Is of something going wrong and the 
more time you have to spend ensuring your 
websites are using the latest version. 


Word Press login area more secure, 

Nick Stockbridge, director of Transmedia ( www. 
trarismedia.co.uk) a WocdPre&s training provider tells 
us how even basic measures can be used to secure 
Word Press websites 

"As WordPress is such a popular blogging platform 
and simple CMS. it has become a target. for hackers Lo 
exploit vulnerabilities in WordPress installations that 
have deter versions or poor security. Most delegates on 
our courses are concerned with security and are 
interested in best practice for securing WordPress. Basic 
measures Include keeping your WordPress Installation 
up to date, Installing Into a location other than the default 
one and using secure passwords and usernames." 

ADVANCED TECHNICAL MEASURES 


* Ensure that your websites are using the latest 
versions of themes and plug-ins to avoid being 
caught out by vulnerabilities identified after 
you have created your website. 

- If using WordPress, you can check for regular 
backend updates from your WordPress admin 
area, whereas one of many handy plug-ins can 
also be Installed to send you an email 
notification on the same day that new updates 
are released. 

* Other open-source systems have similar 
update notification features to WordPress - if 
yours doesn't, simply check manually at least 
once a month via Google for each plug-in you 
are using. 


Exploits on happen to any plug-in, and just because it 
hasn't yet doesn't mean It wont. A knee-jerk reaction to 
using TlmThumb would be to replace It However there 
is no guarantee that your chosen script doesn't suffer 
equally. Now the particular vulnerability in the TlmThumb 
example has been patched, it would arguably be safer to 
use the latest version of TimThumb over an equivalent 
unknown plug-in because at least it can be confirmed 
that the issue has been secured. 

ADMIN AREA AND KEEPING UPDATED 

Having your admin area URL and standard admin login 
name kept as the default is looking for trouble. By 
renaming the "wp-admin' folder and changing or 
deleting the default 'admin' username, you make your 


ADJUSTNG YOUR SERVER SETTINGS 

Whether it's through third-party plug-ins, or code 
developed by yourself or your team. It's not always 
possible to ensure that all code used in your WordPress 
installation can be trusted to be a hundred per cent 
secure A first measure of defence is to make your 
hosting stop any undesired activities regardless of what 
is in the code. This means that even if you accidentally 
Instal a malicious plug-in that Is designed to hijack your 
website, the attack will be stopped Immediately through 
the restrictions placed in your server settings, 

MODIFYING PHP BEHAVIOUR FOR RLE OPERATIONS 

We've already looked at how we can restrict scripts from 
doing things we dont want them to, but as mentioned in 
the original web security article in Web Designer $187 



The nature of open-source means backers will 
often know exactly how your code works, and what 
they need to find to make changes or find settings 
to open further vulnerabilities. You can secureyour 
system against malicious plug ins and scripts that 
attempt to change your installation settings by 
setting file restrictions In your .htaccess file. Specific 
files and directories you may want to protect include: 

• The 'wp-config.php' settings file. 

* Avoid the risk of accidentally making settings 
viewable in your wp-config.php file settings by using 
htaccess to block all access to it via the web U RL, 

-Code: 


* The wp-content directory 

* Themes, plug-ins and user uploads are stored in this 
directory, so we want to make sure users who don't 
have admin-level access to the site can t access 
anything they shouldn't - including hackers who 
have been able to upload malicious scripts. 

Word Press doesn't access any of its PHP via HTTP, so 
we can secure this directory by only allowing access 
to file types such as i mages a nd JavaScript code that 
themes will require. 


* Code: 



* Note - there may be a few exceptions for PHP files that you 
want to allow users of your backend access to via HTTP, 
such as PHP files in themes used for AJAX, In this scenario, 
you can define the exceptions you want to make in the 
htaccess file like the f ol lowing; 



You may also want to disable people from using their 
web browser to access file lists in directories that 
don’t have an index file. You can protect against this 
by adding the following to your ,htaccess file; 
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it's always better to have something to fall back upon 
should something fail. If your hosting allows it, you 
can create or edit an existing settings file called 'php. 
ini’ that controls how PHP works. The main setting 
you want to look at is 

001 open_basedir 

* When set this limits PHP to operating on files In 
specific directories. This is very useful for 
stopping scripts from copying themselves 
throughout your Word Press installation and 
injecting malicious code Into themes and other 
files your website uses. Update this in your php, 
ini file by looking for open_basedir =" - If there is a 
semicolon before it, take this out. Replace this 
line with something similar following, where the 
actual path reflects the true path to your 
WordPress uploads folder: 

001 open_basedir =■ Vhome/¥ww/public_ht™i/ 
wp~ con te nt /uploads/' 

* CAUTION: Modifying this setting will stop file 
functions outside of the uploads directory from 
working, so you have to specify other directories 
toat you wish to allow file operations within the 
open_basedir setting. You do this by separating 
each directory with a colon, hence if you also 
wanted to allow Plug-in A to be editable, open_ 
basedir would look like: 

001 apen_baaedir - Vhoffle/w«w/public_ht[ril/ 
wp~ con te nt/uploads/:/ home/www/publ i c_h tml / 
wp- content/Plyg-inA/ f 

* DAUT1ON; Althoug h ope phased i r is very usef u I for 


limiting PHP scripts to what they can do, it Is only 
a setting for PHR so It will not limit scripting files 
of other languages such as Python. 

P1UG-NM AND THEME DEVELOPMENT 

The ability to develop your own functionality Is what 
makes open-source systems like WordPress so 
flexible However, it's almost as important to keep an 
eye on plug-ins you develop yourself as it fe for those 
created by other people. 

SERVER SIDE US CLIENT SIDE 

Information kept on your server is more secure than 
anything you may expose as hidden information 
within HTML forms or URL query strings. Information 
you may not want to reveal but are required by 
processing scripts when the user submits 
information is tempting to place within hidden fields 
of an HTML form. This Is a basic way to do the Job, 
but provides big security risks that allow hackers to 
tamper with data in your hidden fields and also 
exposes details about how your plug-in works. 

Instead of relying on providing system sensitive 
information via HTML forms, a better strategy is to 
keep such information on the server providing 
the advantage of ensuring it cant be tampered 
with by the end user and also avoiding 
revelations of how your code works behind 
the scenes. This style of processing can be 
achieved in a number of ways - the most 
basic is to use server sessions, which can be 
activated by using PHP's session_startQ 
function and S_5E5£IGN values: 

Server sessions are a good way to keep 
data on the server that is spedfic to the 
current user, but sometimes you may need a 


k k THE ABILITY TO 
DEVELOP YOUR OWN 
FUNCTIONALITY IS 
WHAT MAKES OPEN- 
SOURCE SYSTEMS 
LIKE WORDPRESS 
SO FLEXIBLE 9 V 



CLIENT BROWSER 

(Session ID) 


WQ&UpRfcliS OPHi 
Plugin Directory 
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ABOVE: 

When creating a 
WordPress plug-in 
make sure it Isas 
secure as possible 


//////////// server mm mm 


PROCESSING SCRIPT 


SESSION 

Details... Details... Details... 

Details™ Details,,, Details.,, 

Details,. Details... Details... 


ABOVE ! Using session data to avoid reveal lug system- 
Sensitive information via HTML or cookies 
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WORDPRESS SECURITY 


more robust solution to access date that is relevant to all 
users. One example would be information for product 
processing for some type of ^Commerce plug-in. By 
creating a table for data profiles, you can store your data 
as a J5GM string using PHP'sJsonencodeO function and 
use a hidden leld in the form to store :he record ID to 
find the processing inforrr^ton. This allows you to 
process the same information, but by only revealing the 
data profile ID. 

VERIFICATION WrTH TOKENS 

When you are processing any data especially critical 
data such as payment confirmations you need to 
ensure that the information provided is genuine. Tokens 
are a verification code generated by your script that are 
used to verify that returned information is what it should 
be. Make your system more secure by generating 
tokens to validate authenticity of returned important 
data. Combining this with server-side data profiles will 



THE MUST-HAVE SETTINGS IF 
YOU’VE GONE DTV WITH WORDPRESS 


If you have installed Word Press 
yourself, you should be familiar 
with how FTP programs like 
FileZilla and Cyberduck work. You 

can use these programs to set file 
permission codes on all of your files 
that will limit how they can be 
accessed by plug-ins and scripts in 
your website. The following are 
suggested file permissions you 
should use: 


* File directories should be set to 
755, allowing for files to be read 
and executed, but only you as 
the owner can write to it. 


Regular files should beset to 644 
to stop them from being 
tampered with scripts within 
your installation. 


• Files you want editable from the 
WordPress theme editor should 
be set to 666 to allow WordPress 
PH P code to edit them - although 
keep t his to a minimum beca use 
plug-ins can also edit these files. 


ensure that hackers can't fed your system into 
processing the wrong data profile. 

Creating a token can be achieved by producing an 
MD5 hash. This is done by combining information you 
want to verify with Information known only by the server 
- such as the user login time and secret password. The 
following code shows tow this could be done with PHP: 

@01 Stoken - mdSCSdataC'icP] + $_ 

SESSIONC'loginTiiie’ ] + SsystemPassword); 

VERIFY FILE TYPES 

When accepting file uploads with your code, you should 
always check to see what type of files are being 
uploaded. The aforementioned TimThumb script was 
designed to work with image uploads, but a failure to 
dneck the types of files being uploaded opened a 
vulnerability that allowed PHP scripts to be sent and run 
on the server. At first glance, the obvious solutton to the 
problem would be to put a ban on PHP files being 
uploaded through the script, but this still leaves huge 
holes for other types of scripting and executable file 
types such as Python that the server may support. 
Instead of retying on creating a large list of file types to 
baa the hundred per cent secure solution is to validate 
all file types against what you will accept, leaving no 
scope for your code to accept anything threatening. 

EVALD IS EVILO 

Programmers are sometimes faced with scenarios that 
can benefit from being able to embed PHP code within 


content, such as creating calculations and performing 
server functions from content stored within a database. 
Those who are not aware of the security implications of 
this would see PHP'sevalO function as an opportunity to 
open many opportunities tor dynamic data processing 
sent from the database. The problem with this is that If 
the database is hacked, the nature of open-source plug¬ 
ins will also mean that the hacker will know (or be able to 
guess) which parts of the database are used to store 
PHP code that gets executed; from this, all they would 
need to do is update or insert a record that has PHP 
code to do anything they want Including; 

• Find your installation settings and email it 
to themselves. 

• Write new scripts on the server that open 
vulnerabilities for the hacker and their automated 
tools to attack. 

• Inject PHP scripts with malicious phishing code. 

• Stealing content files via email. 

The solution to this problem is not to use evaIG in the first 
place. Instead, use a more sophisticated approach, one 
that allows your content to have triggers that call 
processing scripts and generate results to be placed Into 
tiie content giving yoL full control of what code Is being 
processed These triggers would contain the information 
your content needs for dynamic processing information 
and so would still provide you with the abilities your 
code needs to solve the problem at hand. 


1 1 ALWAYS CHECK TO SEE WHAT TYPE OF 
FILES ARE BEING UPLOADED 9 J 
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ABOVE : Database content ^vith triggers Is much more secu re than embedding PHP code in a database 
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UK’s MOST ADVANCED 
RESELLER HOSTING 

Sign up to our award winning Reseller Hosting and sell unlimited websites with unlimited 
web space, bandwidth, databases, email and more, all at no extra cost. 

The complete Reseller Hosting solution 

Sell unlimited websites and domain names, as well as our wide range of additional products to 
fit your customer's needs. Use our hosting billing & CRM solution 'HostPay 1 to sell In real time. 
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increase your profits with 
exclusive reseller discounts 



100% YOUR brand 

Every aspect of your hosting is white label and can be branded as your own, including your 
customer's control panel, webmall, welcome emails and anything else you can think of I 



C Dedicated Servers 
G Virtual Servers 
G goMobi 
Ci SSL Certificates 


Create your own packages 

Customise each account to any Level you like. From how much web space and bandwidth 
your customers get, to selecting what web apps they can install from their control panel, 

24/7 UK support 

We don't employ any contractors, temps or external support services; all our support 
team are 100% based in our UK offices and full time members of staff. 4 

No hidden fees 

All the features you need to attract and manage customers are included as standard. Unlike 
our competitors we don't charge you for basic functionality, such as your customers getting a 
bran dab le web hosting control panel or additional MySQL databases. 
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Heart Internet support tlwir 
customers with market-loading 
hosting technology at 
gresi prices 


Suzi Perry 
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As well as selling unlimited websites, pick and choose from a wide range of additional products, Including 


Sell Virtual Servers 

Only £8.99 per month 

/ Create your own VPS packages, 

/ Full API Integration a 

J Linux & Windows I 

/ Delia Intel hardware 

j Full white label control panel tor 
your customers 

/ Sell VPS In real time 


Sell Dedicated Servers 

Only £59.99 per month 


Sell Hosted Exchange 

Only £4.99 per mailbox 


V MS Exchange 2010 aa standard 

y Free Outlook 2010 for you & § 
your customers * 

/ 10GB storage \ 

y Transfer in Exchange 2003 & 
2007 easily 

/ Sell Exchange in real time 


Find out more: www.heartinternet.co.uk 
Call us: 0845 644 7750 

Normal Price from only CS9-9B par month 
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CHRIS WRIGHT DISCUSSES THE CHALLENGES DESIGNERS AND 
DEVELOPERS NOW FACE WITH THE RISE OF THE NEW iPAD 


A pple launched the new iPad back In March, It 

sold more than 3 million units In Its first three 
days, and despite some mild controversy over 
heating issues and what is or isn't a 4G data 
connection, it has been met with almost 
universal acclaim. By now most of you will be 
familiar with its new features - the Retina display, the quad- 
core graphics processor, and the new cameras being 
among the most popular. The Retina display probably 
stands out as the most significant upgrade from the 
previous model, and certainly the thing new users will 
notice first. The increase in resolution and brightness realty 
is a marked improvement from the iPad 2, It isn't quite the 
same as the iPhone 4 Retina display, but it is as dose as it 
needs to be and certainly sets the new IPad head and 
shoulders above Its peers. 

THE RETINA DISPLAY 

The Retina display also poses some interesting challenges 
for mobile web development It certainly gives web 
developers some new aspects to think about when 
putting together sites. Users of the new IPad now have at 
their disposal four times more pixels than those using an 
iPad Z and a million more than found on an HDTV. Just as 
app developers have started to upgrade their products to 
include high-resolution images, website developers need 
to start thinking about how they can use the capabilities of 
this new screen in their designs. Websites with heavily 
optimised, or poor-resolution, images will be Instantly 



IPAD 2 THE NEW IPAD 


shamed when viewed on the new iPad. What is acceptable 
on even modem desktop screens Isn't always going to cut 
it now espeda lly for web designers who want their sites 
to shine no matter the device being used to view them. 

Upgrading images and graphics used in a web design 
isn't in itself difficult - websites have had to move with the 
times as screen resolutions have increased over the years, 
but It does open up the wider Issue of 'responsive design'. 
Such is the diversity of devices that a site can now be 
viewed on a single design to fit them all doesn't really cut 
it The new iPad (as opposed to the iPad 1 or 2} with its new 
screen is now yet another device to consider with its own 
unique requirements, 

This divergence of devices isn't a recent development 
and was at feast partly foreseen by the World Wide Web 
Consortium. 'Media types', introduced In CSS 2.1 were 
designed to help with just this issue, and differentiated 
between things like 'print, 'screen' and TV’. Specific CSS 
styles could then be crafted that were best suited to a 
given device. In this way a website design can automatically 
respond to the specific device being used to access the 
site - hence, responsive, or adaptive, design. They had 
limited use though In practical environments. While ‘print 
stylesheets' have proved very popular with designers and 
users alike, the 'web revolution' on TV sets hasn't really 
happened as some thought it might. Instead, tablets and 
phones have grown vastly in popularity when users aren't 
sitting at a traditional desktop. 

Something else was needed to augment media types, 
and it arrived In CSS3. Media types were now extended 
with the much more useful media queries'. This extension 
to the standard provided queries to detect speci fic screen 
sizes device sizes, or even the current screen orientation; 
this proved a much more flexible solution to responsive 
design. Now we can happily target an iPhone, an iPad or 
even an iPad set to landscape mode. C55 is actually 
targeting specific screen sizes, rather titan a particular 
model o' device, i iowever, Lhe new iPad makes Lhings a 
little more difficult... 

Unfortunately the device size CSS queries (specifically 
the mimdevice-width and max-device-width queries) 
cannot differentiate between an iPad 2 and the most 
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RESPONSIVE DESIGN AND THE NEW IPAD 


recat Cor an original first-generation iPad and the new 
iPad). That is because they all report the same resolution of 
1.024 x 768, even though the new iPad is 2,048 x 1,536. This 
is because fie screen sizes are actually the same size no 
matter the iPad model. The iPhone 4 suffers with the same 
issue when trying to differentiate it from ai earlier iPhones. 

There is a solution though, and it requires an additional 
media query - Web Kit- m I n -d ev I ce-p ixeJ -ratio. A value of 2 
indicates a Retina display Con an iPad or iPhone}, while a 
value of 1 indicates a normal screen. Combining this query 
with device-width will allow your CSS to pick out a new 
iPad and you can then target specific styles accordingly. It 
goes without saying that all browsers do not support this 
property, only WebKit ones. Obviously it works with Satan 
on the iPad. 

GROWING FILE SIZES 

The technical ability to detect and cater for the new iPad is 
all well and good, but there is a bandwidth aspect to 
consider as well when looking at a website design for the 
the device. Again mobile apps have already given us a 
glimpse of how the future will look. Apple's latest iPad apps 
have swelled in size, in part as a result of accommodating 
suitable Retina display 
graphics. Keynote has 
increased from 115MB 
to 327MB. and IMovie 
has increased from a 
modest 70MB to a 
whopping 404MB. Higher-resolution images for websites 
on the new iPad may not necessarily result in size increases 
of quite the same magnitude but the numbers are 
certainly going to go up and it is something designers 
need to be aware of. 

iPad users connecting to the outside world with Wi-Fi 
nay no - , be concerned as Llieir daLa liniLs are generally not 
an issue, but mobile data plans are sure to take a hit It isn't 
exactly the same situation as back in the early days of the 
web - squeezing heavily compressed JPEGs down a 28.8 
Kbps modem line - but websites for the new iPad are 
going to be bigger than they otherwise would have been. 

The responsive design techniques described above can 
ensure that only users of the new iPad get to see most 
aspects of your high-resolution design. But if Apple's 
website is anything to go by these same users will have to 
download two sets of images - both the normal-resolution 
images intended for the majority and the high-resolution 


versions intended just for them. This could potentially be a 
serious issue for users with data limits. 

Apple has updated its website with JavaScript that 
replaces images with high-resolution versions, once a new 
iPad is detected. However, this happens after the regular 
versions have already been downloaded. So users of the 
new iPad take a double hit - twice the number of images to 
download and larger file sizes for the high-res images. 

No one is saying Lhat every image a new iPad user sees 
on your website has to be high resolution and hand 
tailored to suit their device- A much more sensible 
approach is to ensure that all images are up to a certain 
standard and then selectively upgrade images that have 
the most impact on the user experience. As with the vast 
majority of design decisions a balance between the 
aesthetic and the technical needs to be found. 

TOUCHING THE WEB 

It is not just the Retina display that has changed how web 
developers approach the 'iPad-enabled web'. The 
touchscreen, now such a common part of phones and 
tablets, is also a consideration. While the new iPad didn't 
bring any changes to the basics of Touch', its popularity 
and impressive sales 
figures mean more and 
more developers are 
thinking about touch- 
website 

design. Apple CEO. Tim 
Cook, recently had this to say on the runaway success of 
the iPad: 

It's amazing how the product has captured so many 
people - you're using one, my mother's using one, my 
seven-year-old nephew uses one. I to go the gym In the 
morning and the trainer's using one. At Starbucks. I look 
around - everybody has one, reading their newspaper or 
magazine or whatever. In education. It's being used; in the 
enterprise, it's being used in big numbers From my point 
of view, it's the fastest adoption across a wide range that 
I've ever seen before," 

SO WHAT DOES ALL THIS ACTUALLY MEAN 
FDR WEB DESIGNERS? 

Well, firstly there are a few obvious things to consider. 
People will be using their fingers to move around your site, 
instead of a mouse This has implications for your design, 
as users will basically be much less accurate when 'clicking'. 


“IPAD APPS HAVE SWELLED IN SIZE, IN 
PART AS A RESULT OF ACCOMMODATING 
SUITABLE RETINA DISPLAY GRAPHICS ” 


n 



46 


feature 








SHARED DEVICES 

Jakob Nielsen, the usability guru, raised an interesting point last 
year abo Jt the shared nature of iPads and its relevance to website 
and app design; 

“ TABLETS MIGHT BECOME TRULY - 

PERSONAL DEVICES IN THE FUTURE, BUT 
FOR NOW, YOU SHOULD ASSUME YOU’RE 
DESKNNG FOR A MULTI-USER DEVICE 


“Except for people who lived alone, our study 
participants uniformly reported sharing their 
iPads with other family members. The iPad's 
shared nature contrasts with the much more 
personal nature of mobile phones, which are 
typically owned and used by single individuals. 
Obviously, tablets might become truly personal j 
devices In the future as competition drives down 
the prices. But for now, you should assume that 
you're designing for a multi-user device " 




This obviously has implications for apps. where a user may be required to be signed In to access specific 
functionality. But it equally applies to websites. Designers should be aware that they can't always rely on 
the same user accessing their site, even if cookies would technically allow them to do so. 


Fingers are generally fatter than a cursor Large buttons, 
big links, white space: these are all things that help to make 
a good touch-enabled website. Squashed-up links, 
cramped information or multiple overlapping elements - 
these things are less useful. 

More subtly, users will cover the screen when reaching 
tor elements on the sides of your design, A left-aligned 
navigation - a traditional web standard - might not be so 
suitable for the majority of right-handed users coming to 
your site CSS media queries can help here especially the 
queries that tell you if a tablet is in landscape or portrait 
mode Landscape will give a layout much more space to 
work with, for example. That isn't to say you need to build 
different versions of your site for every conceivable 
combination of user aid device. But subtle changes to 
your master design can accommodate many of these 
facLors, once you are aware of them. 

A more significant technical issue is the widespread use 
of the CSS hover state. Arguably, hover states should not 
be used to indicate a link in any design, but they simply 



aren't an option on touch devices as they aren’t available. 
Similarly, hovering on a navigation to display a dropdown 
isn't going to work. Better to implement a more static 
approach to submenus., or buttons to specifically expand/ 
contract navigation components. The accessibility of your 
site will also benefit from changes in these areas. 


CONCLUSIONS 


The new iPad gives web developers plenty of new 
features to play with and to incorporate into their 
websites. It also offers a number of subtler points to 
consider, The new iPad doesn't differ from previous 
models in that it also still restricts designers in some 
significant ways, most notably in the absence of Flash 
support. This is still absent as it will always be on all 
Apple mobile devices. 

But this doesn't detract from the wonderful 
opportunities the new iPad does offer. Web designers 
have always had to consider new screens, browsers and 


devices. The new iPad is but the latest to be embraced 
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tutorials 


Dynamic 

content 

animations 

With a modern browser, you no longer 
need JavaScript to create interactive, 
fluid content transitions, CSS3 will do 


tools I tccli 1 trends Graphics editors (Photoshop. Illustrator or your 
preferred editor). HTML editor (we used Dreamweaver, but any will do), 
HTML, CSS expert Sam Hampton-Smith 



ncreaslngly, visual effects can be 
i [| [I [{[ rendered d irectly wi thout Flash or 

! JavaScript and sometimes scripts 
j :\ :i ij: can be el iminated a Itogether. 

, J:! ■ ■L. Take the exa 3 sir| 3 |e 

:::::::::::: page with many pieces of content 
To animate between these in the 
past would have nvolved using a 
JavaScript framework such as jQuery to animate 
the position of different elements. Today, with a 
little bit of CSS magic we can render a 
sophisticated user interaction with styles alone. 

Taking full advantage CSSS's new transition 
properties, along with the transform functionality, 
we're going to build a page that allows the user 
to navigate through six different con tent panels. 
Wei arrange our panels around a stage, and 
animate the position of the stage to move the 
correct panel into view when called by the user. 

The effect will render properly in WebKit 
browsers. Firefox and IE1Q. In IE9 the transitions 
wont work, but we'll still get a functional page, 


Basic HTML 

We'll start with a basic HTMl page that has six 
<div>s inside a holding <div>, Rather than animate each 
individual panel, we'll arrange the panels inside the 
holding <6W> and animate this to provide the 
movement required. Create a basic, empty stylesheet 
and link it to your HTML document within the <head> 
section. The full code for this step is on the disc. 

Basic styles 

■ We need to create the basic CSS styles to set up 
the core characteristics of the page. We'll start by 
defining the 'window 1 through which well be able to see 
the content within the holding <div^. Add the size of the 
panels and arrange everything so that it aligns centrally 
on the page. 

001 body { 

002 

003 } 

004 

005 #container { 

006 

007 } 

a 

9 #viewer { 

010 position; relative; 

011 width; 700px; 

012 height: 350px; 

013 overflow:hidden; 

014 margin: auto; 

015 bonder: 10px solid black- 

016 } 


017 

018 ffholdall { 

019 width: 0px; 

020 height; 0px; 

021 position; absolute; 

022 backgrcwnd: white; 

023 } 

024 

025 .panel { 

026 pOS ition: absol U t e; 

027 width: 680px- 

028 height; 

029 padding: 10px; 



030 overflow: hi dden; 

031 } 

Position the panels 

Now we've got the basic styles in place, we can 
create our panel layout. To make it easier, we are going 
to give each panel a background colour. Experiment 
with the position of the panels to get an arrangement 
you like; but remember, arbitrary rotations will make it 
tricky to align the holding <div> later. We've opted for a 
simple herringbone layout. The full code for this step is 
on the disc. 

Add a target 

In order to animate to a particular panel, we'll 
need to be able to identify when it's being targeted, The 
problem is that we're using the holding <div> to provide 
the positioning, and it contains the panels, Instead, we'll 
add extra <div>s to refer to all the panels. Change your 
HTML to took like the code below: 

001 <!DOCTYPE HTML> 

002 <htnl> 

003 <head> 

004 <meta http-equiv="Content-Type” 

content=' r text/htrrl; char5et^UTF-8 ,n > 

005 <title>CS53 Target Selectors</title> 

006 <link rel=" style sheet 1 ' type-'text/css Jf 

href=”styles/screen.css" /> 

007 </head> 

008 <body> 

009 <div itf="container JI > 

010 <div id= "viewer■"> 
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Dynamic content anima tions | 




911 <!— Target dlvs --> 

012 <div id^loadpanell^ 

013 <div id= w loadpanel2 H > 

014 <div id= w loadpartel3"> 

015 <div id= M loadpanel4 M > 

016 <div it3N' J loadpanel5' J > 

017 <div id= ri loadpanel6 H > 

018 <! — Hold All —>; 

019 <div id=' J holdall "> 

020 <div class= J 'panel J ' 

id= ’'panel 1 u >Panel 1 <ydi v> 

021 <dlv class-'panel" 

id= J 'panel2" >Panel 2</di v> 

022 <div elass= J, panel J ' 

id= J 'pa nel3 J ' >Panel 3</div> 

023 <div class= J 'panel J ' 

id-"pa nel4 J ’ >Panel4</di v> 

024 <div class-'panel" 

id- lf pa nelS' 1 >Panel5</di v> 

025 <div class-'panel 11, 

id= J 'pa nel6 Jl >Panel6</di v> 

026 </div> 

027 <!— End Hold All --> 

028 </div> 

029 </div> 

030 </div> 

031 </div> 

032 </div> 

033 </div> 

034 } 

035 <!— End Target divs — 

036 </div> 


* We’ve positioned each of ttie panels into tl*e holding <dlv?.. creating a herring tone 
layout to add interest 

- A look atoLir finally rendered patj«, with each individual element styled cohesively 
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037 </div> 

038 </body> 

og Test targeting 

We'H use the syntax fHoadpanelXta rget #holdall 
{} to provide the positioning styles, so that each panel in 
turn is visible in the viewer aperture. First add the CSS 
code below to target the second panel, then load the 
page in your browser and add #loadpanel2 after the 
URL in the address bar. 

001 #loadpanel2;target #holdall { 

002 -webkit-transform; translateY(~359px) ; 

003 -moz-transform: translateYf-SBSpx); 

004 -ms-transform: translateY(-350px) \ 

005 } 

06 More Positioning 

" Wow we've got the principle, we need to position 
the holding ^div> for the remainder of the panels, using 
the :target syntax in each case so that if the page calls 
the ffloadpanef4 <div>. the holding <div> is positioned to 
show panel 4 and so on, 

001 #loadpanel 1: target ^holdall { 

002 -webkit-transform: translateY(0px) ; 

003 -noz-transform: translateY(0px) ♦ 

004 -ms-transfortn: translateY£0p)O; 

005 } 

006 Aloadpanel2:target Jf holdall { 

007 -web kit- transform: translate Y(- 

350px); 


008 

009 

010 

011 

012 


All current-release browsers 
will happily work with our 
code, and IE9 will render 
correctly, albeit without the 
fancy transitions. For older 
browsers, consider using 
conditional stylesheets to 
simplify your design. 


-moz-transform: translate (-350px); 
-ms-transform: trafislateY(-350p>O; 


> 


#loadpanel3:target ffholdall { 

-web kit-transform; t ra nslateY11050px) 
tra ns lateX COpx) rotate (-90deg) - f 
013 -moz-transform: translateY(1050px) 

t ra nslateX t@px) rota te{- 90deg); 

014 -ms-transform: translateY(1050p>O 

translateX[0px) rotate(-90deg); 

015 } 

016 
017 
700px) 

018 
019 
020 
021 
022 


#loadpanel4;target ^holdall { 

-webkit-transform; translateYt- 

-moz-transform: translateY(-700px); 
-ms-transform: translateY{-7&9px}- 


#loadpanel5:target tfholdall { 

-web ki t- 1 ransf orm : tra nslateY[ 1058px ) 
translateXt-700px) rotatet-90deg) ; 

023 -moz-transform: translateY(1050px) 

translateXC-7&0px) rotateC"90deg) ; 

024 -ms-transform: trafislateY(1050p>O 

t ra nslateX (-7&0px) rota te (-9&deg); 

025 > 
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026 #loadpanel6:target #holdall { 

027 -wetokit-transform: translateYf- 

1050px); 

028 -moz-transform; translateY£-l050px) ; 

029 -ms-transform; translateY<-1050px); 

030 } 


A word of warning 

You' II have noticed when we set up the #holda II 
<div> we set the width and height to both be zero. This 
is okay because HTML elements will expand to allow 
the contents to be seen, even it the parent element isn't 
big enough, if we were to change the width and height 
of the #holdall ^d\v> at this point, our transforms would 
cease working as the point of transformation would 
change - so leave the width and height at zero! 


Add some links 

- We need to test that our positioning works 
property, and we can do this quickly by adding a set of 
links at the bottom of our page. Each link will point to a 
#loadpanelX <div>, providing the targeting we require. 


001 

<div id= u 

002 

<ul> 

003 

<1iXg 

004 

<1 iXa 

005 

<lixa 

006 

<llxa 

007 

<lixa 

008 

<lixa 

009 

<ul> 

010 

</div> 


nav"> 

h ref- f #loadpanel1 
h ref = " #1 oacteanel 2 1 
href=' , #loaotanel3 l 
h ref=“#loadpanel4 
href="#laacfcanel5' 
h ref = Jl fl loat^panelfi 1 


>l</ax/li> 

>l</aX/li> 

>l</ax/li> 

>l</ax/li> 

>l</ax/li> 

">K/ax/li> 


Animate! 

■ If you test now. you should see that dickl ng on 
individual links will set the holding <div> such that the 
appropriate panel is shown in the viewer window, but to 
really see the effect we'll need to add a transition to the 
#holdali <div>, so that rather than Jumping into place, it 
smoothly shifts into position. Add the CS5 shown below 
to do just that. 

001 tholdall { 

002 width: Spx; 

003 height; Gpx; 

004 position:absolute; 

00 5 bac kgrou nd: wh i te; 

006 -webkit-transition: all 3s ease-out; 

007 -moz-transition: all 3s ease-out; 

008 -ms-transition: all 3s ease-out; 

009 } 

Test and test again 

Before we go any further, it's pretty important to 
check and test your page in every browser you can 
think of. making sure that the positioning and transitions 
work as anticipated. You should find that IE10 works, 
although IE9 won't transition. It might be a good idea to 
add a conditional stylesheet for use with older versions 
of Internet Explorer. 

Designing the page 

Now weVe got a functional animation system in 
place, we can start to design our page. Open up your 
favourite graphics editor and create a mockupof the 
design you'd like to implement. Consider the central 


viewer window, the navigation to allow jumping 
between panels, and decorative elements around the 
outside. We've gone for a Leonardo da Vinci approach. 

Break down the elements 

We've started off by creating a few different 
background images that will overlay each other nicely, 
blending together to create the effect we defined in our 
mockup. Make sure that any transparency is rendered 
as transparent by saving the filefs)as transparent PNGs. 

001 body { 

002 position: relative; 

003 margin: 0; 

004 padding: 0; 

00B background: white url (pagebg.jpg) repeat 
top left; 

006 font-size; 62,5%; 

007 font- family; "Futura Sfd IH , Helvetica, 
Arial, sans-serif; 

008 } 

009 

010 Jfcontainer { 

011 position; relative; 

012 padd ing-top; 20px; 

013 width: im; 

014 height: 100&; 

015 min-height: 90@px; 

016 background: transparent urlfccntainerbg. 
png) no-repeat center top; 

017 } 

Add any additional markup 

Now's the time to add any additional markup 
required to make your design work. In our case we’re 
adding information and images inside our panels, and 
we're also including a main heading above the viewer, 
You can find our completed HTML on the coverdisc if 
you'd like to follow along with our design, 

Panel backgrounds 

WeVe now going to work through eadh panel in 
turn, creating a background Image to replace the 
bnghtty coloured HTML background we put In place 
earlier on, Again, this is down to your own taste and 
preference, but we've continued along the da Vinci 
theme to create a series of panel backgrounds that 
work with our overall design. 

Add some extra style 

We'll need to add some additional styles to 
ensure our panel contents are displayed beautifully 
We've added a basic <6\v> inside each panel that will 
hold the content, and set it to be almost black, with 
white text inade. This will offset against the paper-style 
background nicely. 

001 . info { 

002 position: absolute; 

003 top: B0px; 


GO 
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004 

005 

006 

007 

008 

009 

010 

011 

012 

013 

014 

015 

016 

017 

018 

019 

020 

021 


left- 30px; 
width: 200px; 

padding: l®px; 
background : #lc0900; 
color: white; 

box-shadow: 0px 0px 10px #333; 


.info h2 { 

text-transform:uppercase; 
font-size: 1, 4etn; 
font-weight:normal; 


. info p { 

f ont-size: l.lem; 
1ine-heighf;i.5em; 


} 



In this tutorial we've used the target 
pseudo-class in order to react to user 
Input. The target class Is added to any 
element that has an ID and Is called 
using an Internal anchor link, such as 
n panel! Note, however, that In order 
to animate the parent <dlv>that 
contains our panels to the correct 
position, we need a way of knowing 
both when the user clicks on an 
internal link, and which link they've 
clicked on. 

For this reason, we've added six 
redundant, nested cdlv>s around out 
parent <div>. each w Ith a unique ID 
that relates to an individual panel. 
When we set up our internal links, 
rather than point to the individual 
panels, we instead point to the 
redundant <dlv>s, allowing us to 
create a CSS rule that looks for the 
parent <dlv> existing inside a targeted 
<div>,and animating the whole 
container into the correct position. 


022 

023 .info p a { 

024 color; #f7eed7; 

025 } 

Style the nav 

1 W- We n eed to create the styles that wil l el low our 
navigation to align to our original mockup. We're going 
to use a simple technique to create perfect circles: first 
set the width and height to match each other, then use 
a border-radius of exactly half that value to create 
beautiful curved lines! 

001 #nav { 


002 

003 


position:relative; 
padding: l&px: 
width; 700px; 

margin; auto; 
text-align;center; 


005 
006 
007 } 

008 

009 #nav ul li { 

010 width: 30px; 

height; 30px; 

margin; 5px; 

display: inline-block; 
line-height;30px; 

box-shadow: inset 2px 2px 5px i 
background: rgba(0,0»0»0.7}; 
border-radius : 15px; 
border; lpx solid #000; 


011 

012 

013 

014 

015 

016 

017 

018 

019 

020 

021 

022 

023 

024 

025 

026 

027 

17 


} 

#nav ul li a { 
font-size: 1.3em; 
text-decora tion:none; 
font-weight: bold; 
color: white; 

display: block; 

} 

Test and review 


There are still a few enhancements we can put 
in place, but before we get to those It's essential to test 
what we've done so far thoroughly as we 
make iterative changes to our 
design. You need to ensure that 
your design continues to 
work after each major 
change (such as styling 
the navigation). 


t make iter 
dcsigi 

Ik ■••• 

L 


Extra 

animations 

Individual elements on 
each slide can be 
animated by using the 
same rtarget method we’ve 
employed in main slide 
panels. We’ve animated 
the Mona Lisa using this 
approach on slide 2! 


lf Individual 
animations 

f One of the best things 
W about CSS3 is that we can 
' assign individual styles to 
elements within the markup, 
and target them separately. This is 
good news because it means we can 


choose to add individual animations to our different 
elements, adding further interest and interactivity to the 
page. 

[g Animate the image 

nside panel 2 we’ve got an image of the Mona 
Lisa, which is a bit too big for the panel. By default it sits 
behind the text shown in the info <div> but it would be 
nice to have the painting animate into view when we 
move in to view panel 2, Start by ensuring your image 
has a class we can use to target it 

001 <img elass="slidefranright‘ f src-' 1 irtages/ 
monalisa.png J ' alt= J, The Mona Lisa" /> 

20 Use target 

I" The next thing we need to do is to tell the 
stylesheet that we only want to initiate the animation 
when the second panel is actively targeted. Add the 
code below to set this up. WeVe gone for a quick and 
easy animation here, but you could have added a 
key framed animation if you wanted to. 

001 r s 1 idef' rcfflir ig h t { 

002 position:absolute; 

003 top; 0; 

004 right; 0; 

005 margin-right :-7fl0px; 

006 -web kit- transition; all 4s ease-out; 

007 -moz-transit! on: all 4s ease-out; 

008 -ms“transit! on: all 4s ease-out; 

009 1 

010 

011 #loadpanel2: target ,siidefrom right { 

012 margin-right: 20px; 

013 margin -top: -20px; 

014 -weh kit- transform: $tale{0.8) rotate(- 

lfldeg); 

015 -moz-transform; scale(G,B) rotated - 

10deg); 

016 -ms-transform; scale(0,8) rotate(- 

10deg); 

017 } 

Testand repeat 

Test that your animation works successfully, and 
tweak the positioning of the before and after values 
until you get a result that you are happy with. New work 
your way through the other elements on the page 
adding in animation as desired until you've completed 
your design and interactions, 

Taking it to the next level 

You've now completed your very own CSS-on |y 
animation! However, this es just the beginning. Civen the 
same technique you could easily create other things like 
a fluid tabbed design, or a linear photo slider. Consider 
how you might take advantage of the target class, and 
be sure to let us know how you get on via email, 
Facebook or Twitter! 
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Create eye¬ 
catching box 
blur effects 

We are going to delve into some 
HTML5, CSS3 and jQuery to create a 
nice blur effect that animates in and 
out as you hover over it. 

toolsltedil trends HTML5. jQuery. CSS3, Dreamweaver 
('xpcrt Neil Pearce 



n this tutorial we are going to create a 
simple bin reflect for text-based items. 

The idea is to have a set of text boxes that 
::::: will get blurred and scaled down once we 

hover over one of them, but the item you 
hover over will stay in focus, singling it out 
and highlighting it to the viewer. So if you 
are looking to add some nice interactive 
effects to your blog or information site, 
then this tutorial is going to be ideal for 
you. What we will do is populate our text boxes 
with fake testimonials for a site, so anyone who is 
interested in reading more would just need to 
rollover that testimonial. 

We'll be using CSS3 transitions here, and also 
some jQuery to apply the respective classes. 

Since CSS3 transitions are not supported by older 
web browsers, the finished tutorial will be best 
viewed in .Safari. Fi refox or Chrome - not any 
variation of Internet Explorer. So open up your 
favourite text editor {we've decided to go with 
Dreomweaver) and let's get started! 



## The item you hover over will 
stay in focus, singling it out and 
highlighting it to the viewer if 


Get started 

First, open up your text editor and create a new 
HTML5 file; call it 'index.html'. Then create two folders, 
one called 'css' and the other called % Now create a 
'styles,css' file inside the css folder and do the same for 
the js folder with a file called ' scripts.js'. Then open up 
your 1ndex.htmr fife making sure you include a link to 
your style sheet within the head. 

eel <!DOCTVPE HTML> 

002 <htmi> 

003 <heaef> 

004 <meta charset- 

005 <title>Teslimc>nial item blur effect</title> 
006 <link rel= rt stylesheet" href= M css/styles. 
css"> 

007 </head> 

008 <body> 

009 </body> 

010 </html> 

The header 

We are going to add a container div using the 
section tag just underneath the <body> tag. so we can 
centre our testimonials on our page using CSS. And 
then we are going to add a <header> tag that contains 
our main title for our page, which of course we are 
going to style slightly later on. 

001 cseetion class= J 'container'^ 

002 <header> 

003 <h^Testimonial Blur Effect with HTM_5, 
C$53 &amp; jQuery</hl> 
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@04 </header> 

00S </section><!“- END container — > 

Inner container 

n this step we will create an inner container to 
hold our testimonials. We will give it both a class and id. 
The class will be used for our CSS and the id is going to 
be used as a hook for our jQuery. As this is a section of 
our page, it makes sense to use the section tag here. 

001 <seetion clas s=" inner-container 1 ' id-''inner- 
container'^ 

002 </section> 

Article tag 

With in our inne r container we can add our first 
testimonial. Now we are going to use the <arhcle> tag 
here, but you con also use the <blockqaute>, <div> or 
<sect!on> tegs-The difference is somewhat confusing 
Put, like the ^section* tag, the <artide> tag typically has 
a heading (often in a header element), and sometimes a 
footer so this is a good candidate for a snippet of text. 

001 <article> 

002 <p>&quotf In order to view and 
understand the history or reality of the past, 
one must view all events as part of an 
i nte racti ve ^tiol e&quot ; </p> 

003 <p classedient-name''>April 1, 2012 - 
by Neil Pearce</p> 

004 </article> 

More articles 

We added a class called client-name 1 to the 
bottom <p> tag so we can style it nicely later on, and 


then we added the quotation marks using HTML to help 
keep it rice and dean. Copy and paste that article we 
did in the last step, and paste it several more times to 
finish off our HTMI markup code- 

001 Csection class= r 'inner-container 1 ' id=''inner- 

container "> 

002 <article> 

003 <p>&qoot;ln order to view and 
understand the history or reality of the past, 
one must view all events as part of an 
interactive whole&C]uot'</p> 

004 <p class= J 'tlient-name''>April 1, 

2012 - by Neil Pearce^/p^ 

005 </article> 

006 <article> 

007 <p>&quot;In order to view and 
understand the history or reality of the past, 
one must view all events as part of an 
interactive whole&quot;</p> 

008 <p class-'client-name' 1 > April 1, 

2012 - by Neil Pearce</p> 

009 </article> 

010 <article> 

011 <p>&quot;In order to view and 
understand the history or reality of the past, 
one must view all events as part of an 
interactive whole&quot;</p> 

012 <p class- 'cl ient-name r '>April 1, 

2012 - by Neil Pearce</p> 

013 </article> 

014 <article> 

015 <p>Spuot; Today we will show you some 
examples of websites that are using beautiful 
and inspiring color court? inations that match 


perfectly and create an eye candy&quot ; </p> 

016 <p class= J 'cl ient -name ''>April l r 

2012 - by Neil Pearce</p> 

017 </article> 

018 c/sectionx!— END container --> 

Adding some style 

Open up your CSS file and add In your r&set if 
you don't have a reset then you can use Erie Meyer's by 
following this link meyerweb.com/eric/tooIs/css/reset 
Then add in your background image (if you are using 
one) and style our page title. We have used a Google 
Web Font for our page title, and this can be found at 
wwWiflQQflle.comAwebfonts by searching for 'Droid’. 

001 body { 

002 background: url(', r /iings/bg,ppg ') ; 

003 } 

004 header hi £ 

005 font-family: J t)roid5ans\ sans-serif; 
006 font-size: 19px; 

007 background: Jfddd; 

003 padding: 30px; 

009 border- radius: 6px; 

010 > 

Container 

J Let's add a rule for the outer container and inner 
container that will centre everything on our page. We 
want to make it 930px wide, and to give it some room 
at the top we have added a 30px margin. 

001 .inner-container, .container! 

002 position: relative; 

003 width: 930px; 

004 margin: 3@px auto; 

005 > 

Clearflx 

Because our articles will be floated, we need to 
dear the float. Rather than insert extra non-semantic 
markup to clear the float on container elements, we can 
use pseudo elements ^before and :after) to do all the 
hard work for us. This is commonly called clearflx, and it 
is very effective solution in resolving layout issues and 
browser inconsistencies without the need to mix 
structure with presentation. 

001 .inner-container : before, 

002 .inner-container:after £ 

003 content : J ' N ; 

004 display: table; 

005 } 

006 r inner-container;after £ 

007 clear: both; 

008 } 

Article styles 

With our articles, we need to make them 
block-level elements and give them a fixed height and 
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The web design com pany 

"We are so excited to see our 
website designed and 
developed properly, and 
professionally." 

April 1, 2012 - by Neil Pearce 


b 
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- THi ntjs ar£ starting to take s haps as 
the styles for the article boxes ere 
added in 

* We have the active state wo rftlrig 
together with the box-shadotv property 


width. Further down we add in the -webkit-backface- 
visibilitv property. We use this property to specify 
whether or not an element is visible when it is not 
facing the screen, Also, we'll add the transition for three 
properties: opacity transform and box-shadow, These 
will give us this nice animation effect. 

001 .inner-container article! 

002 display: block; 

003 width: 180px;height: 220px; 

004 background: #fff; 

005 cursor; pointer; 

006 float; left; 

007 border; I9px solid #fff; 

008 text-align: left; 

009 text-transform: none; 

010 margin: 15px; 

011 z-index; 1; 

012 -webkit-backf ace-visibility: hidden; 

013 box-shadow; 

014 0px 0px 0p* 10px rgba(255 r 255,255,1) r 
015 lpx Ipx 3p* IGpx rgba{0,0,0,0.2); 

016 -webkit-transition: 

017 opacity 0.4s linear, 

018 -webkit-transform 0.4s ease-in-out, 

019 box-shadow 0.4s ease-in-out; 

020 } 

Testimonial headers 

Now we are going to style our titles to our 
testimonials. So. use our Google Web Font and give it a 
size of 14px. To push it away from any content below, we 
add in a bottom margin of 20px. We then add a little bit 


more style by giving it a subtle drop shadow using the 
text-shadow property- 

001 .inner-container h3 { 

002 font-family; 'Droid Sans', sans-serif; 

003 font-size; 14px; 

004 margin-bottom: 20px; 

005 font-weight: 400; 

006 color: rgba(0 f 0 } 0, 13 ; 

007 text-shadow: 0px fipx 0px #000; 

008 opacity: 0.8; 

009 } 

Styling the text 

The next step will be to style the text within the 
<p> tags, We ore going to use the Verdana font and a 
font size of llpx. We then give it a line-height to space 
out each line and very subtle drop shadow to the text to 
bring it out slightly. Then we can turn down its opacity 
for yet another subtle effect and to help readability. 

001 .inner-container article p{ 

002 font-family: Verdana, sans-serif; 

003 font-size: llpx; 

004 line-height: 18px; 

005 color; #333; 

006 text-shadow; 0px 0px 0px #000; 

007 opacity; 0.8; 

008 } 

Content transitions. 

- -• Let's add the animation for the inner content 
using transition. But this time we have added transitions 


for all supported browsers, which include Safan, Firefox, 
Opera and IE10*. So we are adding these animated 
transitions to any content that is within both the <p> 
and <h3> tegs. 

001 .inner-container h3„ 

002 .inner-container article p { 
transition: 
opacity 0.2s linear, 
text-shadow 0.5s ease-in-out, 
color 0.5s ease-in-out; 
-webkit-transition; 
opacity 0.2s linear, 
text-shadow 0.5s ease-in-out, 
color 0.5s ease-in-ouf; 

-moz-1 ransition: 

opacity 0,2s linear, 
text-shadow 0,5s ease-in-out, 
color 0.5s ease-in-out; 

“O-transition; 

opacity 0.2s linear, 
text-shadow 0.5s ease-in-out t 
color 0.5s ease-in-out; 

-ms-transition; 

opacity 0,2s linear, 
text-shadow 0,5s ease-in-out, 
color 0.5s ease-in-out; 

023 } 

Blur it 

In the next few steps we are going to add some 
CSS3 that will blur out the boxes that are not active 
(hovered over). First, let’s blur out the background of our 
boxes. Now, we are styling a class called 'blur' that we 
haven't included in our HTML. However, what we will do 
is add that class using (Query in a later step. 

001 .inner-container article.blurf 

002 box-shadow; 0px 0px 20px l@px #ddd; 

003 -webkit-transfonn; scale(0,8); 

004 -moz-transform; scale(0.8); 

005 -o-transform: scale(0.8); 

006 -ms-transform: scale(0.8);; 

007 transform: scale(0.8); 

008 opacity: 0.7; 

009 } 

More blur 

To finish off our blur effect in the C55. add some 
styles to both the <h3> and <p> tags so the title text and 
paragraphs get blurred out too. We can achieve that by 
adding no colour to our text-shadow and increasing its 
blur by IQox. Then we turn off its colour and bring down 
its Opacity to 0.5. 

001 .inner-container article.blur h3 { 

002 text-shadow: 0px 0px 10px rgba(B, 0, 

0, 0.9); 

003 color: rgba(0, 0, 0, 0); 

004 opacity; 0.5; 


003 



006 

007 

008 

009 

010 

011 

012 

013 

014 

015 

016 

017 

018 

019 

020 

021 

022 
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4 UHVO> 

■ The styles are added far the ten I, and 
nov* everyth mg is ready for us to add 
transitions and transform properties 

* To ti n ish orr the styles, we have added 
the green client name that sits 
underneath our main text 


005 } 

006 . inner-container article.blur p{ 

007 text-shadow: 9px 0px l@px rgba(51, 51, 
51 r 0,9); 

008 color; rgjba(51 „ 51, 51, 0); 

009 opacity: 0.5; 

010 } 

The active state 

Like the .blur class, the active class will be added 
by the jQuery script that we will write in a bit. So when 
this class is added to the hovered box. we want to scale 
it up and then give it a stronger drop shadow using the 
box-shadow property. We then need to make sure its 
z-index is greater than anything else, and then we will 
set the content's Opacity to 1. 

001 .inner-container article,active{ 

00 2 - webkit-1 ran sforni: seale(1.0 5); 

003 -mz -transform: scale(I,05); 

004 -o-transform: scale Cl, 05); 

005 -ms-transform: scale(1.05); 

006 transform: scale(1.05); 

007 box-shadow: 

008 0px 0px 0px I9px rgba(255 r 255,255, 1) r 

009 Ipx llpx 15px 10px rgba(0 F 0 r 0,0.4); 

010 z-indexr 100; 

011 opacity: 1; 

012 } 

013 . inner-container article.active h3, 

014 , inner-container article,active p{ 

015 opacity; 1; 

016 ) 

Client name 

So our last CSS rule will be for the client name, 
shown directly underneath the testimonial text. From 
looking at the code you will see it's very straightforward, 
and the only thing we need to remember is to float it 
left so we can add some top margin that enables us to 
push it down further. 

001 article p.client-name { 

002 float: left; 

003 color: #99cc66; 

004 font-size: 12px; 

005 font-style: italic; 

006 margin-top: 30px; 

007 } 

The jQuery 

Mow open up the scripts.js file that we created in 
the first step, and add in this jQuery code. What we are 


doing here is creating a few variables to use in our 
mouseenter and mouseleave events. So when we hover 
over an article, we will have set it so that ali the other 
articles (the class blur and the current one) will receive 
the class active. 

001 $ (docimen t). ready (f unction Q { 

002 var ^container = $( dinner-container'), 
003 $articles = ^container, 

children('article ') , 

004 timeout; 

005 Sarticles.on( r mouseenter r „ function( event 

) ( 

006 var $article = ${this); 

007 clearTimeout( timeout ); 

008 timeout = setTimeout( functionQ { 

009 if( Sarticle.hasClassCactive 1 ) ) 

return false; 

010 $articles.not($article). 

re[ixjveClass( ' active ' ). addClass ( 'blur ' ); 

011 $article.removeClass( J blur') . 

addClass{'active'); 


012 }, 75 ); 

013 »; 

014 $ container.on ( 'mouseleave 1 , function( 
event ) { 

015 clearTimeoutC timeout ); 

016 Sarticles.reiti 0 veClass('active hlur'); 

017 »; 

013 »; 

Linking up the scripts 

All this CSS and jQuery is of no use to us at all 
until we link to them. So within our <heed> tag, place the 
CSS and jQuery links as normal. However, it is now 
considered best practice to place all your scripts at the 
very bottom of your page, so we encourage you to do 
just that. So, CSS in the ■rhead* tag, and scripts just 
above the closing </body> tag. 

001 <1— CSS —> 

002 <link rel= J 'sty las heat" href= J 'c5s/styles. 
css'> 

003 Clink href-'http: //fonts .googleapis.ccm/ 
css?f ami ly=Droid+Sans 1 rel= 1 stylesheet ' 
type='text/css'> 

004 <!— scripts --> 

005 <script t ype=" text/java sc ript jF src="http:// 
aj ax.googleapis.ccftl/a ja x/ 1 ibs/jquery / 1.7,1/ 
jquery.min. j$"x/script> 

006 


It is considered best practice to place all 
your scripts at the very bottom of your 
page so we encourage you to do that iS 
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Build an 
HTMLS game 
with EaseUS: 
part 2 

Add core parts of the game engine: 
gravity collision-detect and movement 

toolslteclil trends Dreamweaver. HTML5. EaseUS 
expert Mark Shufftebottom 




ast month we created all the assets that 
we needed to work with in our game, 
such as the background scene, the 
player, and the crates, as reusable code 
objects in JavaScript using the EaseUS 
framework. This month we are going to 
embark on the more exciting part of the 
journey, putting it all together to make a 
playable game. We are going to use two 
different types of collision detection: 
rectangular collision detection - or bounding box. as it's 
more commonly known - and circular collision 
detection. Not only that, but well be applying gravity 
and making our character jump from platform to 
platform, using the space bar to launch our player and 
the cursor keys to control its movement. 

If seems that a lot can happen in a month! Since we 
started work on this game there have been several big 
developments with EaseUS, First, it's now just one part 
of a larger suite of open-source JavaScript libraries 
called CreateJS, and this comprises a tweening engine, 
a sound player and a preloader, so be sure to keep an 
eye out for those. Bigger news is that there will be an 
extension panel available for Adobe Flash CS6 that will 
allow you to export all your animation and assets 
directly to HTMLS Canvas, and it will use EaseUS to 
power the display list 


CreateJS comprises a tweening engine, 
a sound player and a preloader, so be sure 
to keep an eye out for those i# 


Picking up from last issue 

Open the document where you left off last 
month, or copy the start folder onto your computer 
from the cover CO. We're going to add our entire code 
listed in all steps sequentially, starting under the 
handle Image Load function we added last month. This 
first code adds the background image, door and hero to 
our Canvas element 

001 function start(){ 

002 var bg = new Bitmap(bgimg); 

003 s tags . addCh i Id (bg); 

004 door = new Bitmap (dimg); 

005 door.x = 131; 

006 door.y = 3S4; 

007 stage. addCh i Id (door); 

008 hero = new htero(img); 

009 hero,K = 80; 

010 hero.y = 450; 

011 s tage . addCh i Id Che ro ); 

Stand clear of the platform 

' We now set up a new array to hold all the falling 
crates and platforms in, We start a for loop and add new 
platforms to the stage using the platformW. platformX 
and piatformY array we set up last time to position each 
on the stage. The platforms are pushed into an Array, 
which we'll use for collision detection later. 

001 crates = new ArrayQ; 

002 platforms = new Array(); 

003 for(i=0; i < platfonnW,length; !++){ 

004 var platform = new 
Platform(platfornMCi] f 20) ♦ 

005 platforms , push(platfomi); 

006 s tage, addCh iId(platform); 

007 platform. X = platformX[i]; 

008 platfonm.y = platformYEi]; 

009 1 

Set up the crates 

We use another for loop to add five crates to the 
scene and position them off the top using the 
resetCrates function we'll create later. We also add the 
key, which must be collected to complete the level. 

001 for(j=0; j < 5; ]++){ 

002 var crate = new Crate() ? 

003 crates, push (crate); 

004 stage, addChiId (er ate); 

005 resetC rates (crate); 

006 } 

007 key = new Bitmap(kimg); 

008 key,* = 900; 

009 key .y = 490; 

010 stage, addChild (key); 

Set up the ticker 

The ticker is what happens every frame and it 
calls the function 'tick'. Here we set the ticker to run at 
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Editing objects 

Just like in Flash ActionScript 
EaseIJS uses very simple 
terminology to add and remove 
elements from the stage. A 
simple addChild or J 
removeChild will do 
the job! 


004 

inAir = false; 

005 

break; 

006 

}else{ 

007 

inAir = true; 

00S 

> 

009 

> 


00-9 vy=15; 

010 } 

Rectangular collision detection 

We set up a for loop to check against each 
platform with an if statement This checks to see if the 
player's X and Y position is over any of the platforms on 
the screen, it checks this using the width and height 
property of each of the platforms. This is a relatively 
easy way to get rectangular collision detection. 

001 for(i=0; i < platforms, length; 

002 if (hero.y >= platforms[i3.y &£ hero.y<= 
{platfornis[i],y+platfomisCi],height) S& hero,* 


30 frames per second and to update the stage display. 
The actual tick function will be created n our next step 
and this holds the vast quantity of code to make our 
game actually work. 


001 Ticker. setFPS(30); 

002 T icke r , addL i s tener{window) ; 

003 stage.update(); 

004 } 


Making the game tick 

Mow we set up the tick function discussed In the 
last step. We set the heroCenter on the Y axis to enable 
collision detection around our little player. We set up an 


<LeIt> 

»Using a for loop we cycle through each 
crate oh the screen and move It farther 
down the screen. We also make it rotate 
< Above, kip Ui bntt4im» 

■We check to see IT the player is within 
touching d 1 stance or the key, a nd It so. 
we make the key and the door disappear 

* If the key ha? been picked up and the 
player |? within touch log distance of the 
door then we signal that thl s level 1 s over 


if statement to check if the game is currently playing, 
and if so we apply gravity. This means that if the player 
is in the air. we apply gravity to it to bring it back down 
to earth. We limit it at no more than 15. so it doesn’t get 


too fast and comes down naturally. 

001 

function tickQ { 

002 

heroCenter = hero,y-40; 

003 

if (play){ 

004 

vy*=gravity; 

005 

if (inAir)t 

006 

hero.y+=vy; 

007 

> 

008 

if (vy>15){ 


> platforms[iLx && hero.x<(platforms[ 13 . 
x+platfonms[l].width)){; 

Stop the movement 

™ If the player is touching a platform then we set 
their Y position to that of the platform. We then stop all 
velocity on the Y axis and set our jumping and in Air 
variables to false. Notice we break the loop here to 
avoid any further collision tests, if we're not touching, 
you'll notice that we set the in Air vanable to true. 

001 hero.y=platforms[i3.y; 

002 vy=0; 

003 jumping = false; 


Move the crates 

Here we set up a for loop to cycle through each 
of the crates on screen. Each orate is moved at a 
random speed down the screen and rotated. If the crate 
moves off the bottom of the screen then the 
resetCrates function is called to position it aL the top 
again. If the crate collides with the hero then we call the 
gameOver function. 

001 for(j=G; j < crates,length; j++){ 

002 var ct = eratestj]; 

003 ct.y+=ct. speed; 

004 ct , rota t i on+= 3 ; 
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00 5 
006 
007 
008 
009 
010 
011 
012 


if (ct.y>S5&){ 
resetCrates(ct); 

} 

if (collisionHero (ct.x, ct,y, 
ganteOverQ; 


20 »{ 


variable is. set to true so the walk cycle doesn't keep 
playing the first frame. 

001 if (If Held £&• keyOnF=false S3 inAir==false){ 
002 hero,gQtQAndPlay(”walkJT); 

003 keyOn=true; 

004 > 

005 iffrtHeld S& key€n==false &£ inAir==false) 


Screen positions 

Just like in Flash, the canvas 
screen position is measured 
from the top left-hand corner 
Therefore negative numbers 
applied to the Y axis will 
move an object up and 
positive numbers will 
move it down. 


when a key is released the player slows to a halt. If toe 


<Far lull, clcickwi&H> 

■ We usetheend function la clear Ihe 
screen of any game objects, such as 

the player a nd crates so that *we can 
display text messages for game over 
or next level 


■ ir the player makes It across the 
screen to pick the key up and returns 
back to the door then the player gets 
this message displayed, however we 
haven't built any further levels 


■ We display the game over text 
when tie player has railed atr tie 
bottom af the screen, or If a falling 
crate hits tie player We also apply a 
cl ick handler to resta rt play 


Other player collisions 

As well as checking collisions against crates and 
platforms, we need to check to see if the player touches 
the key ; if they do then we make both the key and door 
invisible. If the player collides with the door and the key 
is invisible then we call the nextLevel function, but we 
haven’t built that yet. The last two lines move the player 
in left and right right. 

001 if (collisionHero (key.x+29, key.y-t-20, 
20 )){ 

002 key.visible=false; 

003 door.visible=false; 

004 } 

005 if (collisionHero (door.x+20„ door.y+4§ ( 

20) && key.v i Hible==false) {next Level() 

006 if (If Held){vx = -5;} 

007 if (rtHeld){vx = 5;> 

Play the right animation 

Here we make sure the correct walk cycle is 
played when the player is moving. If the Left key is 
pressed, they haven't already pressed this key and 
they're on the ground. Then we start the left walk cycle; 
which is flipped on the horizontal axis. The keyDn 


C 

006 hero.gotoAndPlayCwalk"); 

007 key Dn= true; 

008 > 

Standing still 

Just getting toe player to have the right stance 
when not moving requires a fair amount of testing. Here 
we check which direction the player was last moving in, 
that the player is on the ground, and not pushing any 
key. Then we can set the appropriate idle frame. 

001 if (dir=="Uft ,r && keyDn=false &S- 
inAir—false) { 

00 2 hero. gotoAnd Stop (“idle_h H ; 

003 > 

004 if (dir== J 'right" && keyDn==false && 
inAir=false){ 

005 hero, gctoAnd Stop (''idle 1 '); 

006 } 

Move the player 

We want the player to move on the stage left 
and right so we apply the vx (velocity x) variable to the 
X axis. We apply a little inertia to this variable so that 


hero falls off the bottom of the screen, the gameOver 
function is called. Finally, each tick, we update the stage- 

001 hero r x+-=v>t; 

002 VX=VX*0.5; 

003 if (hero.y>610){ 

004 gameOver (); 

005 } 

006 } 

007 stage. update 0 ; 

008 1 

When play is over 

Here we set up a function to dean up the view 
on the screen when the game comes to an end. It 
removes all the crates by looping through the crates 
array The player is made invisible as well so that the 
gamer is fully aware that play has finished. Without the 
last line, we wouldn't see any of these changes. 

001 function end(H 
002 play=false; 

003 vac 1 - crates. length; 

004 foe (var i=0; i<l ; i++) { 

005 var c = crates[i]; 
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Flash CSG exports 
content to EasdiJS 


Adobe is now sponsoring Easel JS that 
is written by long-time Flash guru. 
Grant Skinner. He's been very busy 
creating a sound player, as it can be 
tr icky to get sound working 
cross-platform in HTMLS. and he's 
also written a preloader that will load 
all your assets - so the visitor gets the 
trill experience you Intend instead of 
stuttered loading of assets. This whole 
suite of tools is called Create JS and it 
has a new home (www nvatM? rom) 
that links to the documentation. If you 
want a preview of how this will work 
with Flash CS6, check out this video 

-arlnhP Iv^rUTI IV This Will pUtyoU 

well ahead of the inf lux of new users 
that will be using Easel JS to publish to 
HTML5 Canvas as part of Flash CSG. 


006 resetCrates(c); 

007 } 

008 hero, visible-false;: 

009 stage.update(); 

010 > 

Level end 

f the player fs successful at getting the key and 
getting out of the door, then this message is placed on 
the screen. This is positioned in the centre to the stage 
and the end function is called that cleans up the stage 
of play objects. Notice the \n stands for new line. 

001 function nextLevel(){ 

002 gameTxt = new Text ("Well Dane\n\n‘\ 
r '36px Arial", '"#000"); 

003 gameTxt.text ■+= ''Prepare for Level 2"; 
004 gameTxt. text Align = "center"'; 

005 gameTxt.x = canvas.width / 2; 

006 gameTxt.y = canvas.height / 4; 

007 stage.addChild{gartteTxt) ; 

008 end(); 

009 } 


When the game is over 

- r ThegameOver function is very similar to the last 
in that we place text on the stage, calling the 
appropriate typeface and colour. Its placed in the centre 
of the canvas by making the text align to the centre and 
then positioning it on the X axis at half of the canvas 
width. 

001 function gameOver(){ 

002 gameTxt = new Text("Game Over\n\rT, 
"36px Arial", "mm")', 

003 gameTxt.text "Click to play again."; 
004 gameTxt.textAlign = "center"; 

005 gameTxt.x = canvas.width / 2; 

Adding a click 

' The text is placed at a quarter of the way down 
the screen by dividing the canvas height by four. Again 
the end function is called to clean the screen up from 
game elements. There is one final addition to the 
gameOver function, which is a click function to use the 
mouse to restart. 

001 gameTxt.y = canvas. height / 4; 

002 5tage.addChild(gampeTxt); 

003 end(); 

004 canvas, onclick = handled ick; 

005 } 

Handling the click 

When the player clicks to restart the game, this 
function is called. We reset the visibility and position of 
the hero on the screen so that the player can start 
playing again. Notice how positioning objects is as 
simple as setting the X and Y co-ordinates of the object 
This is just like we would have done in Flash. 

001 function handledickQ { 

002 canvas,onclick = null; 

003 hero.visible^true; 

004 hero.x = 80; 

005 hereby - 450; 

Add game objects 

We turn on the visibility of the door and key, just 
in case the player had successfully collected the key 
and then died. The text is removed from the stage and 
the play variable is set to true, which causes the crates 
to start to fall, the gravity to work and all collision 
detections to start. 

001 door. visible=t rue; 

@02 key.visible=true; 

003 stage.removeChi Id (gameTxt); 

004 play=true; 

005 } 

Radial collision detection 

H This function is called to test collisions against 
the crates, key and door, it uses Pythagoras' Theorem 


to generate a circle around the objects and test the 
distance against each other, if they end up colliding 
then the function returns true and we know a collision 
has taken place. 

001 function collisionHero (xPos f yPos, 
Radius){ 

002 var distX = xPos - hero.x; 

003 var distY - yPos - heroCenter; 

004 var dlstR = Radius + 20; 

005 if (distX * distX + distY * distY <= 

distR * distRX 

006 return true; 

007 } 

00S > 

Make the jump 

‘ Now we add the ju mp function, which first of ail 
makes sure that our player is not already jumping or 
falling - after all. we wouldn't want to be able to jump if 
we were doing that. Then depending which way our 
player fs facing we send the appropriate animation to 
be displayed for our jump action. 

001 function junp(){ 

002 if (jumping == false && inAir ” false) { 
003 if (dir="right"){ 

004 hero. gotoAndS top ("jimp"); 

005 }else{ 

006 hero.gotoAndStopC'jiMtjp.h''); 

007 } 

Moving on up 

' Once we have set our player to the right 
animation we need to push the player into the air. We 
do that by giving an initial lift of -2Qpx upwards and then 
set the downward velocity to a negative number, forcing 
the player up. This will return to a positive number as 
we constantly add the gravity variable in step 5. 

001 hero.y -= 20; 

002 vy = -25; 

003 jumping - true; 

004 keyDmfalse; 

005 > 

006 > 

Positioning the crates 

■ The final step is putting the crates at random 
positions on the X and Y axes, while also applying a 
random speed. Now save the project so far and test this 
out in a browser. You will be able to steer your player to 
the key, using the Spacebar to jump across the 
platforms, before returning to the door 


001 

function 

resetCrates(crt) { 

002 

ert.x = 

canvas.width * Math.randomQ|@; 

003 

crt.y - 

@ - Math.randortlQ*500; 

004 

crt . speed - (Ma th. randomQ *5) +8; 

005 

> 
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Give your 
WordPress 
project Roots 



Use the Roots Theme to make a 
development-ready site with HTML5 
Boilerplate and Twitter bootstrap 

tools I f ecit I trends Text Editor, PHR HTM L CSS, jQuery 
expert Ben Fra in 



common frustration when developing 
with WordPress Is stripping down and 
amending the default theme to make It 
more development friendly. The- Roots 
.11111111:. Theme ( rootsth eme.com) removes much 
of this hassle, It uses HTML5 Boilerplate 
as the base for markup and also installs 
the HTML5 Boilerplate .htaccess file with 
it If that wasn't good enough, it also 
includes Twitter's Bootstrap responsive 
grid by default for rapid prototyping. 

There are further time savers too. It installs a home 
page with Loreru Ipsum text, changes the permalink 
structure, adds a primary navigation menu and adds 
any existing primary pages to the navigation. It also 
does a great pb of cleaning up the URLs WordPress 
uses as default for theme assets. Instead of themes/ 
roots/css for example, you just get/css instead, 

Finally, there are other little goodies installed by 
default; a custom HTML5 search template, loop 
templates for archives, posts and pages and all post 
dates are based on the hNews microformat. 

As ever though, every build is different, so we'll start 
with the default WordPress install, add the Roots Theme 
and then tweak it to add extra JavaScript files, 
customise the loop and switch off the default Twitter 
Bootstrap styling. 


I# The Roots Theme also includes 
Twitter’s Bootstrap responsive grid by 
default for rapid prototyping 


Install WordPress 

• * If the hosting platform has a one-dick install for 
WordPress, such as Fantasticoor Installatron. that's 
usually the fastest and easiest option. Alternatively, 
upload the WordPress files manually, create a database 
and follow the fiverminute install. A quick shortcut if you 
have Shell (5SH) access is to download and unzip 
everything directly 

001 wget h ttp: //WorcFress. org/la test, tar. gz 
002 tar xfz latest,tar,gz 

)2 Install the Roots Theme 

The Roots Theme isn't available by browsing 
WordPress themes In the Admin interface, so you’ll 
need to download it from rootstheme com Now 
upload the theme to the Themes folder under the 
WP-Content tab, and refresh the WordPress Themes 
screen found under Admin^Appearance. Now click 
Activate under the Roots Theme. For a quicker 
download of Roots, if you're a Git user, run the following: 

001 git clone https://github.c 0 m/retlehs/r 0 ots. 
git 


Customise activation 

' By default, activating toe Roots Theme will do a 
number of things: create a static front page, change the 
permalink structure, change the default uploads folder, 
create a navigation menu and add existing pages to 
that menu. To customise these choices, just amend the 
drop-downs to suit, Here, we are opting out of toe menu 
related choices. 

Customise default classes 

By default, the Roots Theme adds class names 
to divs based on Twitter's Bootstrap naming convention. 
If you don't need these class names or would simply 
like to change them to something different open the 
'roots-config.php" file and amend the names to suit. To 
show you an example, here we're changing toe main 
classes value to spanMain. 


001 <7php 


002 


003 define( 1 P05T_EXCERPTJLENGTR 1 , 

4 &); 

004 def i ne ( 1 BOOTSTRAP J3F3FQNSIVE' : 

, true); 

005 define( 1 WRAP_CLASSESR 'container 1 ); 

006 define('CONTAINERjCLASSES' t 

VOW r ) ; 

007 define ('MAI ^CLASSES', 

h spanMain'); 

006 define( SIDEBAR_CLASSES' t 

r span4 r ); 

009 define('FULLWIDTH_CLASSES J r 

'span12'); 

010 define('GDOGLE_ANALYTICS-ID 1 , 



Remove Bootstrap JavaScript 

If you have no need for the Bootstrap JavaScript 
plug-ins (tooltips, modals and the like) you can prevent 
them loading. By default the code tor these is stored 
within the olu gins. j s' file. Either remove the relevant 
code or prevent pluaiosjs.loading altogether (which will 
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also remove the H5BP console section) by amending 
the 'roots-scripts.php' file, 

001 // wp.regi5te r_sc ri pt( 1 roots_pl ugi ns ' , 

get_template_directory_uri() . Vjs/plugins. 
js J , false, null, false); 

002 wp_register_script( f roots_script f , get_ 
tempi a te_directory_uri() . '/ j s/seript.j s 1 f 
false, null, false); 

00 3 // wp_enqueue_3cript('roots_pl ugins 1 ); 

00 4 wp_enqueue_scr ip t ( J roots.s cript J ) ; 

Remove Boostrap CSS 

' ; Like the Bootstrap JavaScript the Bootstrap CSS 
may not suit your project needs. If that's the case, to 
save over-writing the Bootstrap CSS styles (H5BP styles 
live in the J styles.css' file instead), remove them entirely 
by editing the roots-scripts.php file and commenting 
out the relevant file loads. This will also save a few 
un-needed HTTP requests to aid site speed: 

001 <?php 

002 function roots_scripts{) { 

003 wp_enqueue_style(Yoots_atyle J , get. 
template_directory_uri() . '/c$$/style.css ' f 
false, null); 

004 /* wp_enqueue_5tyle( 1 roots.bootstrap. 

style', get_terplate_directory_uri() . Vcss/ 
bootstrap.css J t arrayt'roots.style 1 ), null); 

005 if (BOOTSTRAP-RESPONSIVE) { 

006 wp_enqueue_5atyle( 'roots-bootstrap. 
responsive_style'„ get_tt?nplate_d irectory _ 
uri() , Vcss/boots trap-responsive. css f , 


array( J roots_bootstrap-Style J ), null); 

007 } 

008 wp_enqueue_style( r roots_app_style ' r get. 
template_directory-uri() , Vcss/app.css' r 
false, null); 

009 */ 

Add analytics code 

f you want to add a Google Analytics tracking 
script to every page, unlike prior versions of the Roots 
Theme, there's no option in the WordPress Admin area 
to add your Google Analytics code. Instead, open 
'roots-config.php' and enter the tracking code manually. 
Be sure to amend the string to your own tracking code. 

001 define( J GOOGLE-ANALYTICS-ID', J UA- 
Y0URCQ0E-HERE-1 J ); 

os Adding custom functions 

You can add your own WordPress and PMP 
functions directly into the 'functions.php' file in the root 
of the Roots Theme if you wish. However, a blank file for 
custom PHP functions is pre^made at Toots-custom, 
php'. Were adding a filter to remove automatic adding 
of tags in pages: 

001 // disable auto p on pages 

002 function get.rid.of.wpautop(){ 

003 remove-filter ( r the_content J , 

J wpautop J ); 

005 remove-filter ( r the_excerpt J , 

J wpautop J ); 

006 } 


007 } 

008 add_action( r template_redirect‘, J get_ridi_ 
0 f_wpautop' ); 

Help responsive images 

By default, images that are added into a post or 
page from the WordPress Admin area have the height 
and width attributes of the image included in the <fmg> 
tag. If you're building a responsive design, this can stop 
the images scaling appropriately when viewed on 
different viewports. Add this to the Toots-custom.php‘ 
file to prevent the width and height attributes being 
added automatically. 

001 // prevent image sizes being added through 

editor 

002 add_filter( 'pDst_thumbnail_html ' r 'remove_ 
thuitibnail_dimens ions', 10); 

003 add_filter( f image_send_to_editor ', 

'remove. thuinbnail-d intensions', LG ); 

004 function re(nove_thumbnail_dimensions( thtml 

) { 

005 Jhtml = preg_replace( V 

(width | height)=V'\d*V'W ' , NJ \ Shtml ); 

006 return Shtml; 

007 ) 

Adding custom JavaScript 

- f you haven’t disabled plugins js (described in 
step 5) there is currently that file and the ' script, is' file 
loading by default into the <head> if you've used the 
HTML5 Boilerplate before, you'll know that script}*, is a 
blank file ready to insert your custom JavaScript into. 
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ThejQuery library is loaded by default so you can add 
custom jQuery directs. 

001 $(document) r ready(function() { 

002 // your code 

003 }); 

Load additional JavaScripts 

Ttie cleanest way to load extra JavaScript files is 
via the roots-scripts.php file. Here we will load one called 
'eaiajs,'. You can wrap as mamy conditions as you like, 
so the file only loads where needed. Here, it only loads if 
not in the Admin page and within our array (a page 
called either 'PageT. 'Page2' or 'Page3'}. 

001 wp_enqueue_iic ript ( r roots_scr ipt r ); 

002 // Additional section added after the 
existing line above 

003 if ( !is_acfcninO && is_pageCamay( J Pagel 1 f 1 
Page2\'Page3'» ) { 

004 wp_register_script( ' roots_extra p , 
r J .Stenplat e_u ri .7js/ext ra .j s', false „ null # 
false); 

00 5 wp_enqueue_s c ript( r roots_ext ra J ) ; 

006 > 

12 Modernizr out of the box 

The Roots Theme includes the latest Modernizr 
JavaScript library by default so you can leverage its 
power to cleanly fork your CSS styles. The additional 
classes are added to the <htmi> tag so it's simple to 
write fallback styles to cover browser features and 


shortcomings. For example, an SVG logo for modem 
browsers and a PNG for the others. 

001 .logo ( 

002 background -image: url( H .,/img/logo. 
svgz'); 

003 } 

004 .no-svg .logo £ 

005 background-image: url( ' . ./iit^/logo.png r ) ^ 

006 ) 

Conditionally load assets 

- " As Modernizr is loaded by default. it makes it 
easier to conditionally load assets (CSS or JS files) based 
on any number of tests. For example, you might choose 
to load Scott Jehl's ' respond.is' to add media query 
support for old IE. You can add this Modernizr test 
straight into the ' scrini js' file and upload the ‘ respond, 
mini s' file into the js folder. 

001 Modernizr. load ([£ 

002 test: Modernizr.mq( J only all J ) N 
003 if If no media query support, load the 
respond. js file. 

004 nope: '/js/respond, min. js 1 
005 }]}; 

Add an author biography 

To amend the loop for single page posts, open 
■|oop-slngle.php'. Here, well add an author biography 
box after the post content, that uses the text entered in 
the biographical info box in the WordPress admin and a 


relevant gravatar, Look for <?php the contentO. 7> in the 
loop-single.php file and enter the following after it: 

001 <div id= r 'author-bio w > 

002 <h3>About The Author</h3> 

003 <divx?php echo get_avatar{ get_the_ 
author_email() „ J 30' }; ?x/div> 

004 <px?php the_author_description(); £x/p> 
005 </div> 

Ready for development 

: Roots Theme is now set up with lean URLs that 

use the best practice markup structure of the HTML5 
Boilerplate. We've added a custom function to stop 
WordPress adding height and width attributes, making a 
custom responsive design easier to implement. Blog 
post information is based on the hNews microformat, 
You can easily amend this by altering the noGts_entry_ 
meta function of 'functions.php' to suit. 

001 // return post entry meta information 
002 function roots_entry_meta0 { 

003 echo '<time class= J 'updated" datetime='' '. 

get_the_tiine('c') . ,N pubdate> r . sprintf(_ 

('Posted on Sis at %s,\ 'roots'), get_the_ 
dateQ, get_the_time(» . '</time>' ; 

004 echo '<p cl ass="byline author vcard Jf >'. 

_('Written by J s 'roots') <a href="'. 

get_au thor _posts_url(get_t he_autho rjnet a ('id 1 )) 
.’ Jl rel= J 'authcir J ' cla$$="fn J '> r . get_the_author() 

. ‘</aX/p> ■; 

005 } 
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The Web Design Book Vol. 1 

Bringing you up to speed with the new digital 
landscape, the The Web Design Book Vof 1 will 
give you a tour of the latest developments in 
web design and show you how to use these new 
tools to create a truly original site 
£14.99 


BWeb Design VoL 6 

Creativeguides for designing 
rwxt-gan websites, im-aeptn 
features to bnng you up 
to speed on all the hottest 
technologies. Step-by-step 
t utorials showing you how 
to design amazing v/e&sites 
using CSS3. HTML5. Flash. 
Photoshop and more. 
£14,39 


Web Design Vol, 5 

This book provides a 
comprehensive col lection of 
visual lessors or the essential 
techniques needed to create 
awe-inspiring websites, 

£6.49 with code "DOTCOM" 


Web Designer eMag Vbl. 2 

A complete archive of Web 
De sig tier magazine i ssues 137- 
148. Over 824 pages of cutting' 
edge trends and techn iques 1 
Free - 256 page Web Design 
Vol. 03 bookanne included in 
pdf format, 

£9.99 
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Web Design: From Desktop 
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A visual guide to Rash, 

D rea mweave r and Photoshop. 
256 pages of walkthroughs 
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Master tools, revive technical 
advice and read mspirati onal 
features, 

£4.99 
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| Create electric type effects 



Create electric 
type effects 

How to give your type a neon and 
lightbox feel with some simple and 
quick effects 

tools I tecli I trends Photoshop export Steven Bonner 



his tutorial is designed to 
show you howto use 
simple effects in the 
Photoshop arsenal to 
convincingly add a 
light-based finish to your 
type. We ll show you two 
methods to first create a 
simple neon sign, then 
move on to techniques 
that help you give type the appearance of a glass or 
Perspex illuminated sign, similar to that which you'd see 
on buildings. While the lettering itself can be created 
easily in Vector, illustrator just doesn't have the features 
to add the effects shown here so quickly and easily, 50 
Photoshop is the ideal toot due to its powerful handling 
of colour blending and the ability to create realistic light 
by layering options found in the effects menu, 
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Sketch your layouts 

™ Regardless of the image you're looking to create, 
always start your design with a plain old pencil and 
paper. You'll be able to very quickly rough out ideas and 
layouts, allowing you to visually determine what's 
working and disregard what isn't You don't need to be 
amazing at drawing to work out a rough sketch like this 
to work from. 



m Add signage details 

Once you're happy with your paths, thicken up 
the strokes and add a round cap to the lines so they 
appear more tubular. Next, draw an encasing shape 
around your word, which will form the basis of the sign 
frame that the neon lettering will sit against. 



Create a frame 

' The last thing you need to draw in Vector is a 
frame for the letters to be attached to. Simply use the 
Line tool (\) and draw a straight vertical line, then hold 
Shift+Alt and click/drag the line across to duplicate it. 
Now select both lines and use the Blend tool (W) to 
create a blend of lines between the two. Repeat this 
process to draw some more lines horizontally, and make 
them slightly thinner this time, 


Vector your words 

One you're happy with your rough layout start 
drawing the type. If you’re using Illustrator (or indeed in 
Photoshop), use the Pen tool to trace over your 
sketches until you have a series of pleasing curves 
emulating the style you want to achieve. Remember 
that neon signage tends to have a lot of break s- r so 
design your type around that and find interesting ways 
to link your letters together to form a pleasing 'whole'. 



Lightbox lettering 

Next you can either draw or use a font to create 
the lettering for the glass/Perspex lightbox letters. Try to 
use something quite thick and chunky to contrast the 
finer lines used in the neon tube lettering. 



06 Organise in Photoshop 

Once you've drawn all your elements, copy and 
paste them into a new 23S x 302mm RGB Photoshop 
doc as Smart Objects, and position the layers so they 
appear as per your initial layout - clearly labelled so 
you'll find each one later (make sure you copy and 
paste the vertical and horizontal groups of the frame as 
separate layers). Group the neon lettering, the sign 
shape, the lightbox letters and the frame in their own 
folders, and add a folder for the background. 


Build up from an 
initial sketch 






02 _Create the 

vector elements 



03 _Apply blending, 

textures & effects 
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| Create electric typ e effects 



If you're not a devotee of type already, 
try to learn a little more about 


different styles of lettering and play 
around with creating your own. The 
right style of custom lettering adds an 
amazing amount of personality, 
integrity, and will elevate a piece from 
just OK to fantastic- Creating your own 
lettering gives you a chance to use 
unusual connections between letters 
(called ligatures] that you often wont 
find in off-the-shelf fonts and allow 
you to put your own personal stamp 
on your work in a new way. 


When drawing with the Pen tool in 
either Dlustrator or Photoshop, try to 
place your anchor points 'in 
extremis’, or at the most extreme 
ends of each line, so you can work by 
dragging handles on mainly vertical 
and horizontal planes. This means 
you are able to create much cleaner 
and more natural curves. 


Finish off the sign frame 

Now, one the original sign layer 
(organised at the top), add effects settings as 
follows: Drop Shadow (Multiply 75%, Distance 
30px, Spread 33px, Size ISOpx, Noise 5%), Inner 
Shadow (Colour Burn, Opacity 75%. Distance 
Opx, Choke 5Qpx, Size 50px), Inner Glow 
(Screen , Opacity 43%. Noise 5%. Choke Opx. 
Size 40%. Contour Half Round). Bevel S 
Emboss (Pillow Emboss set to Chisel Hard. 
Depth 410%, Direction down, Size 13px, Soften 
16px, Shading angle -90. Gloss Contour Half 
Round with highlight set to Soft Light, and 
Contour switched on). Satin (Opacity 22%. 
Angle 90, Distance 13px, Size 13px. Contour 
Gaussian), Stroke (Size 7px. Position inside. 
Opacity 85%), Now set the whole layer to a 
blend mode of Multiply. 



Add a background 

Next, create a new layer in the Background 
folder and name it 'BG'. then use Alt+Deleteto fill it with 
black. You can use any colour you like, or a subtle 
gradient if you prefer, as long as it's dark, Open up the 
Assets Folder and drag the ‘concrete texture' image onto 
your background colour, then set its blending mode to 
Soft Light Add a layer mask and using a soft brush, 
pamt away some of the texture so it fades to the 
background colour around the edges, 



Add fixings to the frame 

Turn on the Frame group and for the moment 
make the lightbox lettering layer visible, and where the 
lettering covers the overlaps between the lines of the 
frame, use a hard square brush to paint fixings onto the 
frame. Then in the effects menu, add a Drop Shadow 
(Multiply, Opacity 75%. Distance 4px, Spread Opx. Size 
lOpx) and an Inner Shadow (Multiply, Distance 4px, 
Choke Opx, Size 10px). This will add a sense of realism to 
the semi see-through nature of the lettering we'll be 
adding. Turn the lightbox lettering layer off again. 



Texture the frame 

All effects menu values should now be kept at 
their defaults. Click the vertical bars layer and apply the 
following: Drop Shadow (Multiply, Opacity 75%. Distance 
15px, Spread Opx, Size 27px), inner Shadow (Multiply, 
Opacity 75%. Distance 4px. Choke Opx, Size lOpx), Satin 
(Multiply. Opacity 50%. Distance iSpx.Size 13px, Contour: 
Gaussian), Colour Overlay (white) Then copy the layer 
style and apply it to the horizontal bars, ensuring they’re 
underneath the vertical lines In the layer order, 



Making the neon sign box 

Make the sign grou p visi ble and duplicate the 
sign layer. Open up the file ‘Scratched Metal' and drag it 
onto your doc. then mask it inside your sign layer copy, 
changing it's blending mode to Hard Light and its 
opaci ty to 80%. Above this, we've added a Hue/ 
Saturation Adjustment Layer to give the metal texture a 
darker, bluer colour. 




Neon lettering 

Switch on the neon lettering group and make a 
copy of the lettering layer. On the top layer, set the 
following: Outer Glow (Soft Light, Opacity 85% with 
orange blend colour. Spread 14%, Size 145 ptx). and Inner 
Glow (Source centre. Choke 53%, Size 13px). Now on the 
copy below, add an Outer Glow set to Overlay with an 
Opacity of 60%, a Spread of 11%. and a 30px Size, then 
go to the Filter menu and add a Gaussian Blur of lOpx. 
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Create electric type effects | 


Glass/Perspex Lightbox effects 

Make your first letters visible (in our case the 
'TV) and go into the Effect menu, in Advanced Blending, 
reduce the Fill Opacity to 0%. then add an Inner 
Shadow (Blend mode Normal, filled with white. Distance 
24px, Choke 0%, Size 60px, Noise 5%). Outer Glow (Soft 
Light filled with a vivid pink/purple, Opacity 100%, 

Spread 25%. Size 25Gpx). Inner Glow (Overlay filled with 
white. Opacity 55%, Choke 30%. Size 250px, Quality 
Contour set to an inverted cone). Bevel & Emboss (set 
to Pillow Emboss r smooth, Depth 430%, Direction down, 
Size 4Spx, Gloss Contour double ring, Shadow mode 
filled with purple), Gradient Overlay set to Hard Light 
and filled with a mid-purple to magenta gradient, scaled 
to 80%. Finally, add a stroke of lOpx, positioned inside, 
biend mode Screen, and opacity set to 65%, This will 
form the base of your glassy letters. 



Quicktill 


Don'tbe afraid to overdo things a 
little as hyper-reality Is often more 
interesting than straight up perfect 
realism, If things are a bit overcooked 
in places, it can really add to the 
character of a piece, so experiment a 
little and see what happens! 



Duplicating effects 

Now we want to add the same effects to the 
other letters, so copy the layer style and paste it into 
the 'PE' lettering layer. To change the colour, go back 
into the layer effects menu and change the shadow 
mode colour in Bevel & Emboss, and also the 
Gradient Overlay to shades of vivid blue. Again, this 
should result in a rather bold and realistic glassy look, 
if a little dull, so duplicate both the 'TV’and PE' layers 
to boost the colours and vibrance for a more 
hyper-real look. Finally, copy and merge both parts of 
your type, then set the resulting layer to Soft Light 
before applying the Plastic Wrap filter. You’ll want to 
play around with the settings here until you find the 
result that works for your image. 



Highlights 

Next up. make a new layer and call it 'Highlights'. Set the layer to 
Screen and take a soft brush and paint in some random highlights. 
Vary the size of the brush, and concentrate on edges and corners, 
making some stronger than others. Don't be too regimented with 
these, as we want a more erratic feel to this particular step so it looks 
more natural. 



Add a power source 

To add another layer of realism, the next thing to 
do is add some power cables running from the letters 
and the neon sign. To do this, draw the cables with the 
Pen tool and apply a stroke of around lOpx. then add 
the following effects: Drop Shadow (Opacity 75%. 
Distance 2Gpx, Size 21 px) Inner Shadow (Size 7px. Noise 
10%). Bevel & Emboss (set to Pillow Emboss, Direction 
Up, Size 4px, Soften 5px), Colour Overlay of mid-grey, 
and a Stroke of Ipx set to Outside, with an Opacity of 
70%. To give the cable a dirty look, you can also add 
texture in the Bevel & Emboss effect by checking the 
standard Bubble pattern and reducing the scale to 
around 50%. then increasing its depth to around 750%, 
Add more power cables, taking care to draw realistically 
how they would sag and dip between fixings. 



As much as the Lens Flare filter is a much- 


maligned effect it still has its uses, and in a hyperreal 
illustration such as this it gives the right vibe. Create a 
new layer and call it 'Lens Flare'. Fill it with black and set 
the blending mode to Screen, reducing the Opacity to 
around 60%. Now go to Filter>Render>Lens- Flare and 
dick OK to select the 50300mm zoom option. Now 
position it wherever you feel works best 



l 8 Give it a final boost 

v 7 To finish, add a Vibrance adjustment layer and 
boost the colours and Vibrance level until you are 
happy. Of course, we always encourage you to 
experiment, so don't be afraid to try other adjustment 
layers and tweaks until you have achieved the result 
that you are happy with. 


67 



























<lutmials> 


| Refresh your frontend with Photoshop CS6 
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With the launch of 
the CS6 beta, Adobe is 
promising its most inclusive 
production suite to date 


Refresh your 
frontend with 
Photoshop CS6 

We share techniques and styles to 
maximise the impact of those landing 
pages, linking to your online portfolio 

tools I tech I tie nets P hotoshop CSS expert Adam Smith 



Onepager 
Swatch. *:o 
■Tutorial page 
template 


hotoshop has always had a great 
knack tor tailoring its toolsets to 
allow for cross-platform creation. 

Ill I:i :::: i ::: ' From CG textures to grid layouts 

for web. Photoshop has forever 
strived to be the ultimate creative 
package, whichever end of the 
production scale it's being used. 

With the launch of the CS6 beta. 
Adobe is promising its most indusive production 
suite to date. So, of course, Web Designer is keen to 
see how vlB.G's toolsets can be employed to further 
improve front-end web aesthetics. 

Well not onty be concerning ourselves with the 
'pretty bits' but also professional upgrades to 
existing tools, which look to advanced automated 
options to operate far more intuitively. 

Sure, we've only cherry-picked some of the best 
bits to suit our web-design needs, but there's always 
more you can do in Photoshop, with much still to 
explore in this latest iteration. For more Information 
you can head to www.adobe.cpm 



New interface 

First establish the colour theme 
of your Photoshop interface, which is 
easily done by pressing Shift+Fn*F2 to 
lighten the Photoshop Ul or Shift+Fn*F1 
to darken interface elements. This ranges 
from Dark Gray to Light Gray. You can 
also apply these in the Preferences? 
Interface settings. Dark Gray is our 
preferred choice, as it creates a more 
immersive working environment. 
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Refresh your frontencl with Photoshop CS6 



Shape tool settings 

Of course, the Photoshop Shape tool is nothing 
new. but in CS6 it has been radically evolved. For 
instance, applying a Rectangle Shape tool to your layout 
grid, you'll notice that the above menu has changed, 
now with applicable Fill and Stroke options. These 
effects are live at all times, so are instantly editable. 



05 Stroke settings 

Use the Rectangle Shape tool to create a 
navigation bar at the foot of the first grid section. 
Select the Fi I options, choosing Solid colour>CharcoaI. 
This replaces your previous gradient, making the 
following effect dearer, Select Stroke, where you have a 
choice of three styles. We've applied a white solid line, at 
OJGpt in size with Align set to the outer shape icon. 



Switch on the lights 

We've applied a IQGpK Radius Rounded 
Rectangle Shape tool with Gradient Fill options, to add 
our button to toe navigation bar. Next, duplicate the 
background layer. Ctrf/rightclictoRasterize and go to 
Filter>Render>Lighting Effects. This is another option 
set that is much simpler to use than before, now with 
intuitive handle-based settings and full-screen renders. 



Shape Fill options 

' Select your Swatches palette and then, from the 
fly-out menu, choose Replace Swatohes>Onepager 
Swatch.aco, included on the cover disc, Next, click the 
Shape Fill options. The new options menu lets you 
apply solid colours, patterns and gradients, as seen 
here. We've set a Charcoal to Milky Gray colour scheme 


Shape layer options 

▼ : In the Shape Fill options you set the basics for 
your gradient but by double-clicking your shape layer 
you can tweak effects further - in this case In the 
Gradient Fill dialog. Here we've evenly spread our 
gradient more by upping the Scale to 190%. with Style 
set to Linear, using the Move tool to reposition. 


from the Onepager Swatch swatch. 


Cut in effects 


Hiding 
grid lines 

Many times in this tutorial 
you 11 want to scrutinise 
your effects close up. But if 
working with lined edges 
and gradient shapes, grid 
lines can distract. To make 
a quick comparison, turn 
- these on and off by 
pressing Cmd/Ctrl+H 


06 

Sack in your navigation bar 
Shape Fill options, select Gradient again. 

Set your colour from Charcoal to Black. Open the layer 
Gradient Fill dialog and change the Scale to 200% 
before moving up your gradient to create an inner 
shadow. This effect, popular across the web. is now so 
much faster to apply with the new CS6 Shape options 
rather than with previous bitty layer style techniques. 



In the Spot light 

s - " In your settings, set the light type to Spot, Color 
to Blue and its Intensity to S5. We've also increased the 
Hotspot, which is toe central line area, to 95. Use the 
control handles to Scale Length and Scale Height as per 
the screenshot. Once you're satisfied, hit OK. 


CS6 killer 
hidden features 



01_Auto Save capabilities 

F£ now backs up work automatically, 
offering great peace of mind when 
working on important projects. Activate 
this option via Preferences>Flle Handling; 
it's settable to 10, IS, 30 or RQ minutes. 



02 Colours for web 

The Photoshop Color Picker is the Mecca 
of colour setti ngs. and now permits hex 
colours (accepting thehashlag) and 
three-digit value tones in the Color Values 
field. This minor tweak improves 
translation between Photoshop and your 
code editor later down the line. 



03 _Perfect edges 

Thankfully, no longer do we have to 
suffer rounding in our image or shape 
boundaries. These are much crisper in 
CS6 with the Align Edges opt Ion. This is 
activated in the options bar and must he 
enabled on a per-layer basis. 
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| Refresh your frontend with Photoshop CS6 



Filter settings 

This applied lighting effect is to create a drop 
backlight. To finish the effect, reduce the layer opacity to 
around 50%. Fill to 70% and select Filter>Biur>Motion 
Blur; set the Distance to 1.350px. Next, apply Filter^ 
Noise>Add Noise, setting the Amount at 12% and 
Distribution to Uniform. This will now give you a really 
good base from which to present your logo and text 



3 D controllers 

The X and Y Move handles are also great for 
rotating, rescaling and repositioning items in your 
design. Each section of your green, blue and red arrow 
controls a single function, so it's best to scroll over and 
check out the screen prompts to see which does what 
There's also an Infinite Light Source that can be 
repositioned once activated, so it's super-easy to sync 
with any prior lighting effects. 


Lines and fonts 

I • Understanding the Shape tool's options you can 
apply your text, and produce some interesting line 
design with the Stroke settings. WeVe applied the Line 
tool with a solid Milky Gray fill and Charcoal stroke, at a 
size of 5pt. with a dotted-line style. The next new option 
may not seem wholly relevant to web design, but when 
working with text and espeoally logo types the CSC 3D 
options can be very advantageous. 



Ray-trace render 

Choose the 3D>Render option. which - with 
ray-tracing technology - will produce a very high 
degree of visual realism, Such outstanding automation 
is frequent throughout ail Photoshop €56 tools, leading 
us to our next example: Paragraph Styles. With our 
visual hook established in the opener, well use this 
option to lay down our site's body text fast. 


Another dimension 

The 3D option isn't one that might immediately 
spring to mind for web design, but in Photoshop C56 it's 
very easy to pick up and can be a great aesthetic asset. 
Select 3D>New 3D Extrusion from Selected Layer to 
open the 3D plane interface. You may just want a 
standard effect, so the Extrusion Depth in the Properties 
settings is useful, as is Bevel in the Cap settings. 



Type made easy 

The Paragraph Styles options is easily activated 
through the Workspace preset option in the interface. 
Select the Type tool, dragging and creating an area, 
then select Type>Paste Lorem Ipsum. This throws down 
dummy text to work with. Next Click on the Create a 
New Paragraph icon. Here you can set leading, indents, 
spacing after, plus many more structural options. 


15 Perfect 
presets 

All you need to do is 
experiment with the layouts 
you want all saveabie to 
presets.This enables web 
designers to repurpose text 
templates In existing and 
subsequent projects, simply 
by activating a preset and 
re-apptying Paste Lorem 
Ipsum. Character Styles 
presets complement 
Paragraph Styles, for rapidly 
changing the font or colour 
of headings, logos, etc. 
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Need an inspirational site dissected? webdesigner@imagine-publishing.co.uk 


I web workshop 


A giant scrolling 
adventure 


INSPIRATION 

Content and 
concept unite 


inspiration www.intactolOyears.com 


We have seen a plethora of sites recently 
that focus their content around scrolling, 
Thankfully this one has enough unique 



r Use original 

art ideas ^ 

One part erf the site that anchors 
everything together is the unique 
illustrated style. There Is a very clean 
vector look to everything, hut there is 
also a very Subtle texture placed over 
the top to slop It looking too clean. 
With every illustrated element in the 
same style, the look is very original. 


o celebrate ten years of 
mTacto, they have built a 
website that shows the 
journey they’ve been on 
for the last decade. The 
concept they came up with 
was to show a rocket taking 
off, flying through space 
and landing ten years on. As the 
browser loads the page, the browser 
window is positioned at the bottom of 
the page rather than at the top. As the 


user scrolls up to the top of the page 
through the content, there are many 
animated features Including clouds, 
satellites and opening doors. The 
content that is navigated through 
shows the kind of technology 
that has changed over the 
last decade, finishing past 
our now ever prevalent 
multi-screen, multi¬ 
device web browsing. 


features to make it stand out. When the 
site first loads, you find your browser 
located at the bottom - this makes sense 
when you think of the concept. The 
nature of having a rocket means that 
scrolling is surfed to what you do with it. 
making rf take off and fly gives it a 
decent meaning. If you are going to 
do scrolling effects, be sure that you 
have a good reason why. and 
make your content tit the concept. 


^ vA 

/ 


y 


2001-LAUNCH 

i nTa eta D ig na I Pa Ft r • , m 


Milestones 

The journey Is to 
celebrate ten years of 
inTacto, and as such 
there are yearly 
mi Icstoncs hig hlig hted 
down the left of the 
document. 


From the bottom 

When the document loads, the 
browser is positioned at the bottom of 
the document, rather than the top, so 
your spaceship can takeoff and fly 
upwards through the content. 


Automatic 

Users can choose to scroll 
themselves or push the large start 
button, which will automatically 
scroll li up the page, ta king t hem on an 
adve nture into space. 


Textures 

Textures give the page a 
more unique look than just 
the clean vector shapes 
alone, and the illustration Is 
excel lent throug h out. 


Liftoff 

As y o u sta rt to scroll, 
the top doors open 
and a Haw the rocket to 
fly upwards, with it 
locked to a fixed 
position on the screen 
White the content 
shifts around it. 


Innovation 
Along the way there 
are the major 
technological changes 
that have affected the 
company, such as 
different browser 
releases-and of 
course, the advent of 
smartphones. 


72 


web workshop 






































<lutoiials> 


A giant scrolling adventure | 





What our 
experts trunk 
cf chestts 


10 years of InTacto 

"Last: December we created an eCard merging the end of year message 
and our Lenth anniversary. We were inspired by some parallax sites and 
used Lhe vertical view to tell a sLory about a metaphorical space trip through 
the digital universe, narrating the history of the Internet and ourselves over 
the last ten years." 

Alejandro Lazos, creative director & co-founder 



TECHNIQUE Recreating the rocket scroll 


AddthejQuery 

In your HTML document, link to the jQuery 
source cade In the head section, then add the script as 
shown. This waits for the body to load and then scrolls 
to the bottom of our document. It positions the rocket 
div tag in the centre of the screen horizontally and fixes 
the div tag in place. 

001 cscript src= IJ http://code.jquery. 
com/jquery-latest. js fl ></script> 

002 <script> 

003 $(document).ready(function {) { 

004 window.scrollToC®,3600); 

005 var middle - (S(window). 
width 0/2); 

006 ${ M #rocket Jd ) ■ css({"marginLef t jp : 
middle + H px"}); 

007 $('#rocket r ).addClass('fixed r ); 

00S }); 

009 </script> 

Set up the document 

Now we add the CSS tor the body docu ment that 
sets the document height to 3.600px - you can make 
this whatever you wish, The background Is then set to a 
gradient from light blue to dark blue. For brevity we 
have only added the WebKit browser prefix for this. 

001 cstyle type=*text/css”> 

002 bodyf 
003 margin: 0; 

004 height: 3600px; 

005 min-height: 3600px; 

006 padding: 0; 

007 background-image: -webkit-1inear- 
gradient (bottom, rgb(105,221,250) 0%, 
rgb(43,119,201) 44%, rgb(16 f 9,6G) 100%); 
008 } 

CSS for the rocket 

New we add the CSS for Lhe rocket div tag. We 
position this absoiutely on the screen so that it is .500 
pixels from the top; the padding is set up, and the width 
and height Finally this is given a background colour just 
so that it is visible on the screen. 

001 #rocket { 

002 position: absolute; 


003 top: 500px; 

004 padding: 5px; 

005 width; 100px; 

006 height:200px; 

007 background-color :#FC0; 

008 } 

Fix the rocket 

Here we add the code that fixes the position of 
the rocket at 5QQpx from the top, regardless of where 
the document Is scrolled. This is the key CS5 that keeps 
the rocket in the same place in the view, You can use 
this to lock men us on the screen as well. 

001 #rocket.fixed { 

002 position: fixed; 

003 top: 500px; 

004 ) 

005 </style> 

, 5 Add the rocket div 

Now in the tody section of the code, add the div 
tag for the rocket. You can add a rocket image in here if 
you like. Now save the document and test it in the 
browser to see the rocket remain fixed while the 
background gradient changes as you scroll. 

001 <cfiv id=" rocket "> 

002 Put rocket graphic here! 

003 </div> 




TECHNIQUE 

Recreating the 
graphic style 


Creating a unique graphic style can really 
enhance any website. The InTacto site uses 
vector graphics with textures to dirty up the 
clean shapes to create the look; here we 
shew you how to do this, 



Use Photoshop 

When you have created your clean 
■vector artwork In a package such as 
Illustrator, open the image in Photoshop, 
Here you can layer up textures to give the 
vector artwork a much mone unique styling. 



Get the texture 

Do a search on the internet for 
'texture' and look for something that might 
give you a good result. Drag the image from 
the web browser straight onto your rocket in 
Photoshop and it will appear on a new layer 
above the rocket. 



Change the blending 
mode 

Now look in the layer panel and change the 
blending mode of the texture layer to Color 
Burn. You can turn off the visibility of the 
background layer as well, ready for 
exporting as a transparent PNG image. 
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Need an inspirational site dissected? webdesigner@imagine-publishing.co.uk 


I web workshop 

Single-page navigation 
and style 

i nspi ration www.baeckerei-zibuhr.de 



he single scrolling page is 
very much in vogue at the 
moment, with a host of 
great sites adopting the 
styleand adding their own 
unique twist. The concept 
of a single page means that 
users can get access to all 
the content without jumping from 
page to page and back. By its very 
nature the single page design needs, 
or at the very least has to take Into 


consideration., navigational elements, 
image optimisation and its layout, 
Typically,, a single page design will be 
broken down into a few different 
sections which are accessed via a 
fixed menu header. To keep the 
navigation a little more user- 
friendly a 'back to top' link 
can be added near the 
bottom of each section 
to save the user from 
unnecessary scrolling. 


Google Fonts 


The Lobster font is part of the Googl 


Web Font library and can be integrated 


into a page via a link ref or ©import 


E make the Stylesheet <link> tap the 


first element In the HTML <head 


RESOURCE 

Online CSS3 tool 

There is a host of online CSS tools out 
there that can help web designers 
produce quick code ready for use on a 
selected site, CSS3. Please! describes 
itself as 'The Cross-Browser CSS3 Rule 
Generator'. The site is effectively one 
huge stylesheet that manages to 
incorporate all the popular CSS3 
properties including border-radius, 
box-shadow. F.GBA. transform, 
text-shadow, background size and 
box-sizing. These are incorporated into 
classes demonstrating exactly what 
can be achieved with the properties. 
Users can change the values, see a 
live preview of the code and copy 
it into a stylesheet. 


these will not disolav until It has loaded. 
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<lutoiials> 


Single page navigation and style | 


t Natural textures 

"As one of its selling points, the Zibuhr Bakery produces its goods from 
scratch on-site. To emphasise the core purpose of the business, the use of 
1 natural textures such as sack cloth are very ef fective This immediately 
ccommeno suggests that the bakery brings the core ingredients to its store to produce 
meStS their own freshly baked products; 

behind me site? Steven Jenkins, Features Editor, Web Designer 



TECHNIQU CSS3 circles 


Create class 

The border-radius property is typically used to 
create rounded corners on a chosen element [such as 
softening the edges on a square or rectangle), but it can 
be used to good effect when you want to create a 
perfect circle. To get the process going, we first must 
create a new class called 'circlet This will allow the 
values to be applied to a multitude of tags within a 
page, always getting the same result. Now add the 
desired height and width of the circle. 

001 .circle { 

002 height: 400px; 

003 width: 400px’> 

Add borders 

- Border-radiu s adds a radius to the top4 eft. 
top-right, bottom-left and bottom-right extremes of a 
chosen element. The value determines the curve of the 
radius. For example, if the height and width are 400px 
each, the border-radius needs to be 2QOpx to create a 
perfect circle. Effectively, the border-radius is always 
going to be half the size of the height/width. 

001 .circle { 

002 height: 400px; 

003 width: 400px;} 

004 border-radius: 200px;> 


Background colour 

To make the circle and match it to the current 
colour scheme, the circle class will need a background 
colour. To add a colour, the background property is 
called into action. Simply add it to the class and the 
hexadecimal colour code as the value. New apply the 
class to any element to be styled as a circle. 

001 .circle { 

002 height: 400px; 

003 width: 400px; 

004 border-radius: 200px; 

005 background: #9C3} 

Add a border 

A CSS circle can be enhanced with a border, 
image and text. When adding a border the edges will 
flatten. To compensate, the border-radius property 
needs to be expanded by the same amount in px as the 
border. Add a IGpx border and IQpx to the border-radius. 

001 .circle { 

002 height: 400px; 

003 width: 400px; 

004 border-radius: 2l0px; 

005 background: ui~l(image. jpg) 

006 float: left; 

007 border: 10px solid #666;} 



Inspiration Let them search cake 



The Zibuhr Feinbackerei is a bakery that 
produces a host of goodies including cakes, 
pastries and baked goods. It is these 
elements that have provided the inspiration 
for the persona of the page. The 
background textures use natural elements 
such as sack cloth and hessian. The colour 
scheme adopts colours from the baking 
process and throws a complementary 
colour to add a little zest. To complete the 
baking extravaganza, a bevy of action shots 
of baked goods and caffeine drinks are 
added to ail sections of the page Lo add a 
little energy and flavour. 


TECHNIQUE 

Fixing the 
navigation 

Holding tag 

A fixed header, by Its very definition, is 
a header that Is fixed Into position meaning 
it does not scroll with the general page 
content This makes it the ideal component 
to house the navigation, ensuring users are 
always aware of where to get to a new page. 
Create a new div tag or use a semantic tag 
eg nav and set its position to fixed. 

001 nav { 

002 height: 60px; 

003 width: 100%; 

004 position: fixed;} 

Integrate graphics 

A navigation menu needs to be 
distinct, ensuring users know exactly where 
it is. The Zibuhr bakery site uses a 
background image that incorporates a drop 
shadow to distinguish between the menu 
background and the general background 
texture. To add. simply use the background 
property and add the URL of the image. The 
image can be a single slice of the 
background image, repeated horizontally. 

001 nav { 

002 height: 60px; 

003 width: 100%; 

004 position: fixed; 

005 background: #0C6 

urT (images/bgnav.j pg) 

repeat-x;} 

Add menu 

With the nav tag in place, the next 
step Is to create the menu using an 
unordered list. A set of ul tags are populated 
with a list tag for each item to be included. 
Five items equals five sets of opening and 
closing li tags. Each list tag is then floated to 
the left, and left-padding added to make 
room for a background image (if desired). 

001 nav ul{ 

002 margin: 0px; 

003 padding: 0px;} 

004 nav li { 

005 margin: 0px; 

006 padding: 0px 10px 0px 20px; 
007 float: left; 

008 background: url(images/ 
arrow.png) no-repeat; } 


wdb workshop 


75 








^ Apple Newsstand Great digital magazines on iPad /iPhone 


ZIIUO 


A A PEOPLE WHO 
WORK ON OPEN- 
SOURCE 
SYSTEMS NEED 
TO BE MORE 
CAUTIOUS If 


How hacking WordPress and other 
open-source CMS’ works 


FREE CD INSIDE 

180 + minutes of video tutorials 
27 professional wallpaper textures 
2 WbrdPress & Facebook templates 
30 ^p n fe lSot) nc kTwp loops 


www,webde5ignermag.co.uk 


'HTML& 


BETTER CSS3 WITH SASS 

-" tacUcaUyg 


WRITE SCALABLE 
■K WEB APRS 

- BuW from scratch 
^ with Models 


Design with Syntactics 
Awesome Stylesheets 


Avoid vulnerabilities 


Go digital today 

• Fully interactive 
editions 

• Download direct to 
your device 

• Save up to 40% off 
the regular price 

• On-sale worldwide 
the same day as the 
print version 
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off regular print 
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Download and 
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Get your site seen, or suggest a theme 

Tweet us with the URL or topic %. @WebDesignerMag 


[Design 

^Oondi 


Site locos 


Og( 

raftec 


A well-crafted logo is memorable and offers 
instant impact. Here we present 24 examples 
of the art in action. 



MENU SCHEDULE EVENTS PHOTOS ABOUT US SOI 


CHltiS SHIFLETT, BflOO*i.rN BETA, 


CONTACT 


FORM FOI I OWS 
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Email us ft f ebdesigner@imagme-Dublishing.co.uk 


<designcloiul> 

Site logos | 
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■ PHOTOMANIPULATION ■ GRAPHICS ■ NEW MEDIA ■ PHOTO EDITING ■ DIGITAL PAINTING ■ TYPOGRAPHY 


WANT TO MASTER 
PHOTOSHOP? 



The magazine for Adobe’ Photoshop' professionals 
T” 

CS6J _ 

Everything you need to know about the rjfew version 


mmtt 


_ ■ OtfifTAL n PHOTOi4ANtPUL*llO« ariATWI 

^ CREATE PERSPECTIVE EMOTIVELIGHTING RUNASTUOlO i 

Um cfhmpmilKKi ru*« It CPt-ilt drwii by Khtrap Urpth iPAiitif tip* t* c'frtHQ, » 

Ttir 4*1 Cfttua t# fHit pqjtttl 

Inside every issue: 

► Over 30 pages of pro techniques 

► Inspirational artwork and interviews 

► In-depth features on cutting-edge trends 

► The latest creative products reviewed and rated 

@advancedpshop K /AdvancedPhotoshop 


Get your copy today 



Quality print edition on sale at imagineshop .co.uk 


Interactive digital edition on all platforms on sale at 


www.greatdigitalmags .com 


Also available at all 
good newsagents 
















Dedicated to the code-heavy 
side of modern online design 


AIR 4^ ColdFusion CF RubyJI FlexQ PHP pV Google Dart JavaScript A/ .net AS3Q 


Supercharge your CSS with 


Create templates 
with Mustachejs 


Build HTML templates in JavaScript using 
Mustachejs, a logic-free JavaScript template 
that offers code reuse, modularity and 
maintainability. Page 88 


Assemble a web 
server with Node.js 


Build personalised, lightweight, 
efficient and scalable web servers 
using the Node.js platform. Page 92 


Discover how to add more power, elegance and manageability to 
stylesheets with the CSS3 extension SASS. Page 82 











Tired of rifling through a cluttered and 
gargantuan stylesheet? Then give your CSS some 
attitude with Syntactically Awesome Stylesheets 


s web designers and developers, 
we bve CSS, We really do. It's just 
that, every now and again, ft can get 
on our nerves. 

We've all been there that momenL 
when you open up a stylesheet to 
add a simple new nieonty to spend three rnhutes scrolling 
through the thousands of lines figuring out whereto put it 
another two minutes beating the Bight blue cdour you 
used before, then a few more trying to refactor the 
declaration when you realise you've copied a desen lines 
from an almost-identfoal block somewhere else. 

AL times like this, a developer could be forgiven for 
glandng skywards and quietly muttering; "Surely, 
somewhere, there's a better way?' 


The better way 

Beginning way back in 2007, some very dever developers 
decided to take matters into their own hands and give our 
old friend CSS a bit of a mafoeewer The resulting library is 
known as Sass {Syntactically Awesome Stylesheets). 

Of course, it was impossibfe to simply rewrite the rules of 
CSS: the new syntax wouldn't be supported in older 
browsers, so no one would be able to use it. Instead the 
developers of Sass decided to make a language that would 
compile into CSS. That is, you write your styles in Sass, run 
them through a little piece of software, and bam - out pops 
plain old CSS. 

Thai might sound like a tot of work just to generate a CSS 
file What do you get for your troubles? Quite a lot, actually. 
But before we dive in and have a look at everything Sass 


has to offer, wel first need to install it and learn how to use 
it to create CSS files. 

Installing Sass 

In order to start writing Sass, you'll first need to install the 
script that 'will compile your stylesheets into CSS, Sass is 
written in Ruby, so you'll need Ruby to run it. In Apple's OS 
X, Ruby is installed by default, so you don't need to do 
anything eke. On Windows, there are a number of ways to 
install Ruby but the easiest is to use Rubylnstater, available 
at ruhvinstallernm 

Once you've got Ruby, its time to install Sass Sass is a 
gem Ruby-speak for a self-contained package or library so 
we use the gem command to install it Open your terminal 
( 0 -n.d.eve on Windows,Terminal.app on QS X). and type 

001 gem install Sass 

Press Enter/Retorn and you'll be faced with something 
along the lines of: 

001 Successfully installed Sass-3.1.15 
002 1 gem installed 


€$ At times, developers can be forgiven 
for glancing skywards and muttering: 
“Surely there’s a better way?” W 
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Supercharge your CSS with Sass 



Base color 

25% darken 

25% lighten 

25% saturate 

25% desaturate 

Complement 


It's a cinch to create a catour th^mulora website using 
the various colour functions available In Sass 


€€ A feature that makes it easy to start 
using Sass in existing projects, is that 
its syntax is a superset of CSS 99 


003 Installing ri documentation for Sass - 
3.1.15... 

004 Installing RDoc docuirentation for Sass- 


* 


3.1.15... 

Now that Sass b installed, youll be able to obtain access to 
it via the command line To receive an overview of the 
available options type 


Your first Sass file 

One great thing about Sass, and a feature that makes it 
Incredlbty easy to start using In existing projects. Is that 
Bass's syntax is a superset of CSS. Put another way that 
means that all CSS syntax is contained inside Sass. and 
therefore any valid CSS file is also a valid Sass fife 
So, in order to write your first Sass fife you simply need to 
write a CSS file. Let's make the simplest possible stylesheet- 


001 Sass “help 

and hit enter. The resulting output might look rattier 
intimidating, but don! 'worry. For our purposes, the 
important bit is the code situated right at the top of 
everything you see: 

001 Usage: Sass [options] [livin'] [OUTPUT] 

INPUT and OUTPUT are the filenames of the Sass file you 
want to compile and the CSS file you want to generate 
respeaivelv. Let's make use of this and compile our first 
Sass stylesheet 


001 hi { 

002 color: rgb(0, 200, 100, 1); 

003 } 

Save that in a file called, let's say. ‘greenscss! The SCSS 
extension indicates a Sass file 
Now, from the oommand line, run this command in the 
directory where your CSS file is located: 

001 Sass style,scss style.css 

This simply tells Sass to read your SCSS file and output a 
CSS file in the same directory. Open that fife and witness 
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the (not terribly impressive) magic: Sass has copied your 
green heading nie from the SCSS file to toe CSS fife 


Variables 

So far Sass lias done strictly nothing to make our 
lives easier As a matter of fact if your project's 
stylesheet is realty as simple as the one above, 
you'd have no reason to useSassat all. However 
as you're well aware, real-life stylesheets can get a 
lot hairier than that 

Let's say that after a few hours working on your protect, 
you've gone and used' that same green colour In a few 
different places: 



001 hi { 

002 color: rgb(0, 200, 100, 1); 

003 } 

004 

005 aside li { 

005 color; rgb(0 P 200 f 100, 1); 

007 } 

00S 

009 footer { 

010 background-color: rgjb(0, 200, 100, 1); 
011 } 


Now, every time you want to use that colour, you need to 
remember exactly what it was. and if ever you wanted to 
change it, you'd need to scour your files for everywhere 
you ussl it 

Sass comes to the rescue with variables. Just like in 
JavaScript or other programming languages, variables in 
Sass store simple values for reuse later Don't worry If you've 
never done any programming though Sass variables are 
d^dsirrtple to use. 

Instead of repeating that colour throughout the CSS file, 
well just declare it at the topi in a variable 


hi C 

color: Sheading-color; 

] 

aside li { 

color; Sheading-color; 

} 


001 $heading-color; rgb(0, 200, 100, 1); 

002 
003 
004 
005 
006 
007 
008 
009 
010 

011 footer { 

012 bac kgr ou nd-color: $heading-colo r; 

013 } 

Variables in Sass start with the dollar sign ($), and can be 
used anywhere in your files, In the first line of the above 
example, we're assigning a value to the variable. Here, 

It's a colour hot it could just as easily be a numeric value 
feuch as tGpx or 100%) or any value you myhtusefcr 
a CSS property (like red, left, or ininel 
Anywhere in your Sass file that you refer to the variable, 
its value will be substituted in when you compile the 
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€€ Functions allow you to manipulate 
the contents of your variables without 
having to create whole new ones 99 

013 margin-bottom: 32px; 


stylesheet, To prove it run Sass on this new stylesheet anti 
have a look at the output CSS file. As expected, each of the 
rules have been assigned the hex code corresponding to 
our green colour 

Functions 

Using variables in Sass can definitely help make it easier to 
maintain large stylesheets; now, if we decided on a slightly 
afferent hue of green, we'd only need to change it in one 
place at the top of the file. 

However where variables become really useful Cand fun) 
is when we use them in functions. These allow you to 
manipulate the contents of your variables without having 
to create whole new ones. 

Let's say you wanted your subheadings to be a slightly 
darker shade of green. Instead of conning up with a new 
colour value, you can Just write; 

00L h2, ha { 

002 color: darken (Sheading-color* MX); 

003 } 

ThedarkenQ function takes a colour and, well, darkens it by 
the provided percentage. In this case. Sass will give us a 
green that’s 10% darker than $heading-oolor (this turns out 
to be 400954b). 

Of course you needn't stop at darkening your colours: 
Sass also provides the lightemCt saturated desaturateCt 
complementCl and a number of other functions for 
working with colours For the mcreprogrammlng-orlentedL 
there are also functions for working with numbers, strings 
and lists You can gets full list of the available functions on 
the Sass website a - . bitly/6QCQ55. 

When your variables are numeric you can also 
manipulate them mathematically For example, many 
designers Ike to keep the elements on a page proportional 
ty basing them on a baseline measurement let's say for 
argument's sake, 16px; 

001 p £ 

002 font-size: 16px; 

003 margin-bottom: 16px; 

004 } 

005 

006 hi { 

007 font-size: 48px- 
008 margin-bottom: 48px; 

009 } 

010 

011 62, h3 { 

012 font-size: 32px; 


014 } 

With Sass, you can simplify this quite a lot by doing a little bit 
of mathematics: 

001 Sfont-size: 16px 
002 

003 p { 

004 font-size: $font-size; 

00 5 margin-bot tom: Sfont-size; 

006 } 

007 

008 hi £ 

009 font-size: ^font-size * 3; 

010 margin-bottom: $f'ont-size * 3: 

011 } 

012 

013 h2* 63 { 

014 font-size: ifcnt-size * 2; 

015 margin-bottom: $font-size * 2; 

016 } 

Any mathematical operation (+, %, or*)can be performed 
on any numerical value In your CSS. be It in px. %, em or 
what have yon 

Nesting 

So far. Sass has allowed us to write more expressive styles 
using a clearer more natural syntax: But another area 
where Sass really shines is making stylesheets much more 
compact and readable. 

It accomplishes this by allowing you to nest style blocks, 
and thus avoid a lot of duplication 

For instance, took at this pretty common-tooktog block 
of CSS fora sidebar navigation menu; 

001 #sidebar { 

002 float: right; 

00 3 ma rgin-left: 15px; 

004 padding: 10px 2@px; 

005 width: 250px; 

006 background: 4f4f39e; 

007 } 

008 

009 #sidebar ul { 

010 list-style-type: none; 

011 padding-left: 10px; 

012 } 

013 

014 #sidebdr ul li { 


Not exactly the same 

Eagle-eyed readers will have noticed that the 
resulting CSS file isn't quite identical to the Sass 
file westarted with, The rgbaO colour value we 
declared has been translated into its hex code 
equivalent (ff00c864).Sass has done a bit of 
work for us here, allowing us to use the 
easier-on-the-brain RGB (or even H5L) colour 
space and translating It into a hex code. Of 
course, this wouldn't have happened if we’d 
declared an opacity value other than lsince 
there's no way of translating that to hex. 


Sass Firefox Add-on 

FireSass is a Firebug extension that makes 
Firebug display the Sass filenames and line 
numbers of Sass-generated CSS styles rather 
than those of the generated C5S. 

FireSass for Firebug 0.0.9 

hil.ly/I hBqfrW 


A 






Give Sass a try online before downloading the lat< 
release at sass-1 atu? mm >'lrv Titml 
































Supercharge your CSS with Sass 


* 


Keeping an eve on our 
Sass files 

Working with Sass, you'll inevitably trip up by 
forgetti ng to re compile the CSS between 
changes This can be confusing, as you switch 
backand forth between your editor and your 
browser wondering why your edits aren't being 
reflected. Fortunately, there's an easier way - you 
can tell Sass to watch your files and regenerate 
the output CSS every ti me you make a change: 


001 Sass --watch style.sess:style.css 


Leave that com mand ru nr ing i n your term ina I 
while you work, and you ca n forget all about the 
midd leman a nd get on with wrltl ng you r styles. 



This lisi of some ol the files in the Compass framework 
(built with Saw) illustrates how complex CSS can be 
made much more manageable by separating it across 
multiple files 
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015 font -we ig ht: bold; 

016 > 

017 #sidebar ul li a { 

010 color; #333; 

019 text-decoration: none; 
020 } 


Chances are you^e written something like that if you've 
been 'working with CSS for any length of time You may 
even be so desensitised as to riot notice how redundant 
what you've written is. Think about it you've written 
'feldebar' four times. Just to apply some basic styles to basic 
elements In one part of the page. 

In Sass, you can instead write: 

001 #sidebar { 


002 

float; right; 

003 

margin-left; 15px; 

004 

padding; 10px 20px; 

005 

width: 250px; 

006 

background; flf4f39e; 

007 


008 

ul { 

009 

list-style-type: none; 

010 

padding-left: 10px; 

011 


012 

li ( 

013 

font-weight: bold; 

014 

a { 


Let's say you have a set of styles that often go together, like 
the border-radium background, and bg^shadow applied to 
these div elements: 



001 

div.sidebar-box { 


002 

border-radius: 5px; 


003 

box-shadow: 2px 2px 2px #OCC; 


004 

bac kground-colcr: JfF4 F3 9E; 


005 

padding; 10px; 


006 

margin; l0px; 


007 



008 

J 

/ 

009 


_ / 

010 

div. author-details { 


011 

bonder-radius: 5px; 

1 

012 

box-shadow: 2px 2px 2px flCCC; 

\ 

013 

background-color; #F4F39E; 

\ 

014 

padding; Spx; 


015 

margin; 10px 0; 


016 



017 

} 



We all know presentafenal styles are bad, so creating a 
.rounded-box class to add to various elements in your 
HI ML is a no-no. And something generic like .infobox will 
still end opdutterlng your markup with tons of extra classes 
if you apply the same strategy more than a few times. 

So. as more rounded boxes are added, you copy-paste 
and copy-paste those lines of code again and agaia until 
they're scattered everywhere throughout your code. 


U We know presentational styles are 
bad, so creating a .rounded-box class to 
add to elements in your HTML is a no 99 


015 

color: #333; 

016 

text-decoration: none; 

017 

} 

018 

} 

019 

} 

020 

} 


It should be fairly obvious what this does; any block of CSS 
nested inside another block will be applied by combining 
the selectors from both blocks. Mot only is this code a little 
more concise, avoiding all those repeated selectors, it's also 
easier to see at a glance what's going on and which of the 
styles are related to each other. 

Mixins 

Mixins are probably Sass’s most popular feature. Where 
variables allow single values to be reused throughout your 
stylesheets, mixins allow entire chunks of code to be 
reused with a single quick line 


With Sass mixins. this problem is easy to solve: It's just a 
simple case of adding the following: 


001 @mixin rounded-box { 

002 border-radius; 5px; 

003 box-shadowr 2px 2px 2px #OCC; 

004 background-color: #F4F39E; 

005 } 

006 

007 diiv. sidebar-box { 

008 ^include rounded-box; 

009 padding; lGpx; 

010 margin; l0px; 

011 ... 

012 > 

013 

014 div.author-details { 

015 (^include rounded-box; 

016 padding; 5px; 
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€€ Maybe this is the perfect opportunity 
to tidy up that monster of a stylesheet 
you’ve added to for three years? 99 


017 margin j 10px. 0; 

018 
019 > 

Import 

The final Sass feature well cower te extremely helpful for 
when your project grows above a certain siae, and your 
once neat and tidy CSS has become unwieldy 

Tradidonallv, web designers have faced a bit ot a 
dilemma when It came to organising CSS across multiple 
files. On one hand, each CSS file that must be downloaded 
from the server makes your site that much slower for your 
visitors, so it's best to have as few files as possible. On the flip 
side, organising your code when it’s all crammed into one 
super-tong file can be timetoansunring at best and 
infuriating at worst 

5ass gives you the best of both worlds; teap your files 
separate for development purposes, but corn ping them 
all Into one file when It's time to set your site live. 

In Sass. ttiis is done with the @tmpcrt directive. Any 
ether fifes referred to by ©import in your Sass files will be 
automatically included by toe compiler. You dont need to 
specify the extension of toe files, sothey can be either other 
Sass files or plain CSS ones: 


001 ^import “footer"; 

002 ^import “profile"; 

These two lines of code will import all of the different styles, 
variables, and rrixlns from the footer and profile flies Into 
your current file. 

The Sass developers recommend that when you come 
to name sub-stytesbeets, begin with an underscore (for 
example Lfooterscss' and jxoltescsS) to distinguish them 
from 'master' stylesheets that are meant to be compiled 
and Included on a page. Sass understands this fine, arid will 
Import the file whether It's called footeresJ Tocterscss’.'_ 
footercss' or'jooter.scss’. 

Time to Get Sassy 

This article is only a brief overview ot the functionality of 
Sass, The language has many features we haven't had time 
to cover here, and the best place to learn more is on the 
Sass \Mjbsite at sass-lang.com. 

However, after reading this feature you now know 
enough to beginrexp^rimeming with Sass and playing with 
it in some of your existing projects. Maybe this is the perfect 
opportunity to tidy up that monster of a stylesheet youYe 
been adding to for three years? 


Further reading Expand your knowledge with these must-read references 



Pragmatic guide to Sass $25 

pragmaticgmdetoSass 



in Action £29.99 

ivww.manning.cora/netberland 
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Create 

templates 

with 

Mustachejs 

Build HTML in JavaScript using HTML! 

tools I tech I trends Mustachejs, Code Editor 
export Matt Gifford 



I f youVe ever written HTML apps 
that make use of JavaScript to 
manipulate, read and write content 
to the DOM. you may have noticed 
that you write a lot of fragmented 
code programmatically. Whether 
you are concatenating variables on 
HTML strings, replacing strings or 
inserting generated code Into 
markup, it runs the risk of getting messy, quickly. 

This makes your code harder to write and maintain. 
We also want to remove any possible issues of overly 
tight coupling between the Ul and the data provided. 
We can address this by decoupling the HTML markup 
and data with Mustache.is. a logic-free JavaScript 
template that doesn't rely on procedural statements. 

in this tutorial we will take a look at the core basics of 
using Mi istarhp j s in our application to assist in code 
reuse, modularity and maintainability. We will create a 
simple widget that calls the Twitter search API to return 
a JSON structure that we can use to populate our 
templates and easily output the data. 


Get your mustache 

Before we begin creating our templates, we need to get a copy of the 
Mustache JavaScript library. Download the latest release from the URL below 
and extract the J mustach£. | s' file into the assets/js directory in your project 
location, include the reference before the closing body tag in the Jndex.html’ 
file included in the project 

001 github.com/janl/mustache.js 

AddjQuery 

™ We're also gang to be making use of the jQuery library to perform an 
AJAX request and to reference some DOM elements within our page. Make 
sure you include a reference to the hosted jQuery library above the mustache. 
j£.file in the code editor window. You can also use a local copy if you would 
prefer to do so. 

001 <script src-"http://code.jquery. com/] query.min.js" 
type= ” tex t/ j a va sc r ip t J, x/ac ri pt> 

Get the response 

We Ye going to make use of the Twitter API to obtain a JSON feed, 
which we'll use to provide our template with information to render. Create a 
new script tag block and create a call to the get JSON method, pasting in the 
Twitter search URL. Well ask for five records to be returned for the provided 
query parameter. 

001 <script type= jr t*xt/j3V3script"> 

002 S(docunent) , ready (function () { 

003 S. getJSON{" http; //search.twitter.com/search.json?callback=? 

&q=coldf umonkeh&rpp=5'", function (data) { 

004 )}; 

005 )}■ 

006 </scripts 

007 


Refine data 

The returned JSON response contains a lot of information, but we're 
Interested In getting direct access to the results array. Create a new JavaScript 
object called 'twitResp'. set the display node to true and the query and results 
nodes to read from the returned data object 

001 var twitResp = { 

002 display: true, 

003 query: data. query, 

004 results: data. results 
005 } 

Handle no records 

Belov; the twitResp data variable, let's add the following code to check 
for the existence of results from the search. If there are no records returned in 
the feed, we don't want to attempt to output our list. We'll set the display 
Boolean value to false if we encounter this. 

001 if(twitResp.results.length < 1) { 

002 twitfiesp,display = false; 

003 } 

0@4 } 

Partially yours 

Mustache templates can handle partlals. which are a superb way of 
separating reusable or key sections of layout from the template itself. Create a 
new JavaScript object variable called partials, which will hold the various 
partials we want to use »in this case, the header and footer for our widget. 

001 var partials = { 

002 header: r <div id= J 'header J '>Twitter Feeds My Mustache</ 
divxdiv ela$$^recent_tweet5">\ 

003 footer: '</div>' 

004 }; 
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Create template 

Let's starHooieatE our basic Mustache tEmplatfiL We could write this 
as a JavaScript variable: in this example we'll use a separate defined template 
block. Create a new script tag block with the id attribute set to template and 
type attribute set to text/template. Include the first Mustache variable to 
output the query value from the data. 

001 <script id= Jt template" type= fJ text/template 1 "> 

002 

003 {{query}} 

004 

005 </$cript> 

Render to HTML 

-™ We want to send our data into the template for rendering and display- 
on the page. Firstly we'll reference the template itself to get the content. We'll 
send the template, the data and the pa dials into Mustache via its to.htmlO 
method, which we'll set as the content for a div element called content Area, 

001 var template = ${ r #teirplate') r html(); 

002 var html = Mustache.toJitml{tempiate, twitResp, partials); 
003 i{/#contentArea *) .html{html}; 

Set container 

We have defined where we want our populated template to be placed, 
so let's add the required div element into our page. Place the code between 
the body tags in the HTML document, making sure that the id attribute 
matches the one specified in the previous JavaScript code. 

001 <div id= J 'contentArea ,J x/diy> 

Add partials 

Let's amend our template to include the header and footer partials. 
Partials are clearly identifiable and differ from standard Mustache variabiesas 


they are referenced using a > sign, include our partials in the template above 
and below the query placeholder. Partials are rendered at runtime, so we 
could do weird and wonderful things with them. 

001 <script id-'teniplate ,r type- 1 text/teirplate r, > 

002 {{>header}} 

003 

004 {{query}} 

005 

006 {{>footer}} 

007 </script> 

Looping results 

Amend the template to indude the following code, which will display a 
list of returned tweets. Here we can use a section to loop and create the list 
items if we have results to read from. The pound and slash signs define a 
section, similar to an open and dosing tag block. 

001 <div id=' J recent_tweets''> 

002 <ul class= r 'twltter ,r > 

003 {{#results}} 

004 <11 class-'tweet Jf xli> 

005 {{/results}} 

006 </ul> 

007 </div> 

Template functions 

We can amend our data structure to include functions, which we can 
then call as Mustache placeholders. Create a new node called userlmg which, 
as a function, will create and return an image tag and will apply the user's 
profile image URL and the user name as the alt texL 

001 results: data.results, 

002 user lug; fumctlcnQ { 
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003 return '<img sre='" + tKis.profile_image_url + 

004 titles'" 4 this.fnaiLUser + JJ ' />'; 

005 } 

Function arguments 

We are also able to create functions that accept parameters within the 
actual Mustache template itself, insert a new node into the data structure 
called ‘userLink 1 . This will accept a userjd value as the argument, and the 
second parameter is a special rendenng function that uses the current view as 
its view argument. 

001 userLink: functionQ { 

002 return function{u5er„irf p render) { 

003 return J <a hr@f-' J <a b ref=' J http :Www. twitter, com\/ f + 

render(user_id) + target=V JblankV f >@ J + render(user_id) + *</ 

a> ‘ ; 

004 } 

005 1 

Add tweet text 

Add the following code between the list item tags we previously added 
to the template. Here you can see we are calling the userLink function and 
passing the user id parameter between the sections. The userlmg placeholder 
differs from the others as it is wrapped in three parentheses instead of only 
two. If we only used two. it would display the actual returned string and not 
render the HTML. 

001 <p><span cla 5 S= l 'user' f >{{{u 5 er 3 mg>}></span>{{ 4 fuserLink}> 

{{ f ronujser}}{{/userLink}} { {text}K/p> 

Parse text 

Alth oug h th e tweet text is correctly displayed, let's change the 
template to ensure that all user names and hashtags are converted into links 
for users to follow. Create a new node in our data structure called parsedTexl 


which will be a function to re^renderthe provided text and output it with the 
required changes. 

001 parsedText: functionQ { 

002 var tweetText = this.text; 

003 var parsedText; 

004 

005 return parsedText; 

006 } 

Replace names 

Firstly, we want to replace all instances of Twitter user names with the 
relevant link to that user's Twitter profile. We'H use a regular expression to find 
each instance of a username and convert it into the I ITML link. Place this 
within the parsedText function we have just created. 

001 parsedfext - tweetText. replace (/Q I \s)@QwO/g s function^) { 
002 u - u.trimQ; 

003 van usernaine = u.replacet''@'\ PJJ ') ; 

004 var newLink = ' <a hr&f =lf http:\/\/iwjw,twitter. 
com\/ r +username+" J targe t=V'_bIankV'x2 ' +usernai»e+' <\/a>'; 

005 return newLink; 

006 }); 

Replace hashtags 

-----• Mow sot's handle any occurrences of hashtags in the returned tweet 
text. Once more, we'll use a regular expression to find them ail and replace 
them with a link to allow the user to search Twitter for more instances. Place 
this below the name replacement cade within the parsed Text method. 

001 parsedText - parsedText . replace(/( A | \s)#(\w+)/g > function(h) { 
002 h = h. trim() • 

003 var hashtag = h. replace J ” J ) ; 

004 var newLink = 11 <a href^httpAA/search .twitter. com\/ 
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search?q=’-i-hashtag+"' target=VJblankV p > F +hrF r <\/3 >‘; 

005 return newLink; 

006 }); 

Revise text 

Mow that we have the ability to revise our text before we output 
it. we need to amend the template to use the function instead of the 
text value returned directly from the data feed. Replace {{text}} with 
{{{parsedText}}} and notice that we once more use the triple 
parentheses to render the output as HTML, as it may include tags. 

001 <p><span class^' 1 user fJ >£{£userlnig)})</span>[£#userL ink}) 
{£frcm_user}}{£/userLink)) £££pa rsedText)})</p> 

Positive display 

As we have seen, sections will display if the key exists and the 
value is not null undefined or false. We can use the display value we 
set earlier to ensure that our list is only rendered if we have records to 
show. Wrap the code block in the template in a section that will read 
from the display value. 


001 {{Jfdispiay}) 

002 <div id =,J recent.tweets“> 
003 

004 </div> 

005 {{/display)) 


Code library 

In detail 

Let s take a closer look at some of the methods available to use within 
Mustache to render data. 

001 var twitResp = £ 

002 display: true, 

003 query: data . que ry„ 

004 results: data , results, 


Our custom Mustache 
functions are defined as 
part of the data structure 
to access Individual 
values from the response. 


001 userLink: functionQ £ 

002 return function (use r_id, render) £ 

003 return J <a href= r, <a href— "http: \ A/ 

www.twitter.com\/' + render£user_id) + 
target=\ r ’_blank\ w >0 r + render (user_id) + '</a> 

004 ) 

005 } r 

006 userlntg: functionQ £ 

007 return '<img srt='" + this.profile, 

image.url + f " title=" r + this.from_user + ,a ' 
/>'; 

008 } r 


Building up our custom 
data structure, we first 
obtain the actual results 
from the returned 
response received. 


Inverted sections 

- We can make use of inverted sections in Mustache to handle 
the possibility that we have no records to display. An inverted section 
starts with an sign, and anything within these tags will only be 
rendered if the value of that section's tag is null, undefined or false. 

001 £{ A display)} 

002 

003 {{/display)} 

Nothing to declare 

We want to output something to the user to inform them that 
we have no records or data to show them. We could simply include 
some HTML here, but as we are making use of a template system let's 
use a partial, identified by the > sign. Include this between the inverted 
section tags. 

001 {{>noconversations}} 

Final partial 

" With the inverted section written and the noconversations 
partial included, we now need to write the content for the partial and 
include it into the partials JavaScript object. As parbals are rendered on 
runtime, we can include references- to nodes from the data structure 
for inclusion, as we have here with the query value. 

001 var partials = { 

002 header: '<div id= Jf header Jf >Twitter Feeds My Mustachec/ 

divxd i v elass= ,J neeent_ tweet s J '>' , 

003 footer: '</div> h , 

004 noconversations: r <p>Sorry, there are no 

conversations to show you for ■£{query}}.</p>' 

005 }; 


Looping over the array, 
we can reference the 
values to Insert into the 
database by the array 
Index number, 


001 parsedText: functionQ £ 

002 var tweetText = this.text; 

003 var parsedText; 

004 parsedText = tweetText, replace(/ 

( A |\s)@(Vw+)/g, function(g) £ 

005 

006 var username - u. replace 

007 var newLink = J <a href= J 'http: VV 

www .twitter. cm\ / r +u sername+ *ta rget-V'_ 
blank\ 1 +us e rname+ 1 <\/a> ' ; 

008 return newLink; 

009 }); 

010 

011 parsedText = parsedText. replace (/ 

(* |\s)fr(\w+)/g h function^) £ 

012 h = h.trimO; 

013 var hashtag = h. replace) ; 

014 var neidLink = J <a href= J 'http: W 

sea rch r twi tter , ccm\/sea rch?q= 1 +ha sh tag+ f w 
target=V'_blankV J > '+h+ 1 <\/a> f ; 

015 return newLink; 

016 )); 

017 

018 return parsedText; 

019 1 

020 }; 


if Inserting generated code into 
markup runs the risk of getting 
very messy, very quickly ft 
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Assemble a 
Webserver 
with Nodejs 

Sometimes a gargantuan web server 
is too much. Here’s how to 'roll-your- 
own’ using Node.js 

tools I tccli I IipikIs Node.js C riodejs.org ]. Express application framework 
C expre-ssjs.cnml Text editor experts Simon Bisson 



W | eb servers don't need to be 
big, general-purpose 
applications, Over the years 
they've become more 
complex, delivering all kinds 
of content to your browser. 

But what if you need 
something focused? 

Internet Information Server and Apache are overkill, and 
even next-gen servers like nginx require significant 
resources. That's where Node js mmes in. instead of 
taking an existing web server and letting you shoehorn 
your application around its features and APIs, Node. j s 
takes a very different approach. You don't have a server, 
you just have a kit of parts that you can assemble into 
your own custom-built web appliance that handies the 
inputs and outputs you've designed - it's a router that 
takes inputs and gives outputs, an 'if this, then that' tool 
tor your web applications. 

Another advantage is. instead of learning C++ to build 
extensions to Apache, you're writing a server In the 
web's own programming language - JavaScript. 



A*< 



Node.js is a platform built on Ct ; in ' ] ; npt i for easily building fast, scalable network 

applications. Nodejs uses an event-driven, non- 

blocking I/O model that makes It lightweight and 

efficient, perfect for data-intensive real-time applications that run across distributed devices. 
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Getting to Node 

Once installed, Nodej s needs code to work. Unlike the familiar web 
servers, you'll need So write JavaScript to handle requests, building your own 
server from the Node .is framework, start by creating a file called ' server^' This 
is the heart of a Node.js application so declare a protocol and a port 

001 var http = require('http'); 

002 var port = process.env.port |S 8838; 

Creating a server 

Our first two lines of code have declared two key variables - the 
protocol our server is listening for, and the port it's listening on. We can now- 
start to add the code to handle the requests, and to deliver a response. We 
can do this in a single line, with a nested function in a createServer object. 

001 http,createServer(function (request, response) ( 

002 response.w!riteHead(200 t { r Content-Type r i 'text/plain'}); 
003 response.end( J Hello Web Designer\n'); 

004 }). listen!port); 

Run a server 

The code we've just added implements a basic HTTP response, and 
delivers a snippet of content to a page. You’ll need to implement code for all 
the HTTP responses you want to add to a server, which means you'll need 
more than just a single piece of code. Save the code as ' s&rverjs' and run it. 

001 node server.js 

Getting switched 

A good way of thi nki ng about N nrlp js i s as a switch. Your code ta kes 
inputs from a port, and sends the results back to the requester over the web. 
It's event-driven - nothing happens unless it's triggered, with actions handled 
by functions. We can make our code a little clearer, with a function for the 
request handler. 


ti Unlike the familiar web 
servers, you’ll need to write 
JavaScript to handle requests, 
building your own server 9 9 

001 var http = require^http'); 

002 var port = process.env.port | BBSS; 

003 function httpRequest(request, response) { 

004 response.writeHeed(200, {"Content-Type- 1 : 'text/plain'}); 

005 response, write ('Hello Web DesignerW); 

006 response,end(); 

007 } 

008 http.createServer(httpReq^iest).listen(port); 

Making things simpler 

Working with raw Mnde. j s is, to be really quite honest with you, pretty 
complex. You need to understand just how a web server works in order to 
handle all the responses your service is going to need to need to give ■ and 
how to structure the HTTP content that gets returned. A good alternative 
option is to use Express, a set of libraries that make the process of building a 
server from scratch a lot easier. Start by installing Express using Norte,|s’ 
built-in package manager. 

001 $npm install-g express 

Rewriting with Express 

Using Express can simplify a lot of Models code. Instead of having to 
wnteall the HTTP responses for a server. Express handles it for you. You just 
need to define the server and its content. There's a lot less code to write, and 
even less keeping track. Our simple app becomes: 
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€€ Jade turns out to be a very 
important tool for anyone 
building M VC applications in 
Express and Node.js 99 

001 var app = require^ 'express J ).createdrverQ ; 

002 app, get(V, function (request, response) { 

003 response,send(‘Hello Web Designer'); 

004 } 

005 app, listen (8888); 

Express for MVC 

1 Express- is more than just a form of shorthand for building Node.is 
applications, it's a full Model View Controller framework, like the open-source 
Ruby on Rails or Microsoft's ASPNET MVC. You can use it to automatically 
generate the framework for an application, which you can then customise and 
use as the basis for your code. Start by creating an application and install the 
appropriate dependencies. 

001 {express /webdesigner && cd /webdesigner 
002 $npm install-d 

Cutomise Express 

Now that we have built our Express application framework, we can 
start to customise it. We’ll need to edit the view that's used by Express to 
display the index page, which is handled by Node.fs' Jade templaOng engine 
- which separates code and design. In the views directory open 'indexjade' in 
a text editor. 


001 hi- title 

002 p Welcome to fl{title} 

A quick look at Jade 

Jade turns out to be a very important tool for anyone building MVC 
applications in Express and Nodej s. It's a simple template tool that displays 
content from our code. In the routes folder created by Express, open 'i ndexe s'. 
You'll see a title variable - currently set to Express - which is used in the Jade 
template. Change it as follows: 

001 exports ,i ndex = function(req, res){ 

002 res.renderCindex f , { title: 'Web Designer' }) 

003 }; 

Adding a new route (1) 

Node. j s works as a switching engine, taking a URL input and delivering 
it to the appropriate output. Each mput/output pair is called a route, and needs 
to be built into your application code. As we're using Express, we'll first need to 
modify our server code, to add the switching code we need. Edit the routes 
section as follows: 

001 // Routes 
002 

003 app.getfV', routes, index); 

004 app.get(7web‘ „ web,web); 

Adding a new route (2) 

We can now add a new section of code in the routes directory. It's 
always sensible to keep the sections of an MVC application in specific folders, 
as it makes them more manageable - and your job noticeably easier. You'll 
note that we're calling routes.web in the main server code, so we need to 
create the corresponding web j s file. 
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■ Run Express in appl icatiors fol de r to creafe an MVC Fra mEwark, and 

then download dependencies, like the Jade templatlng environment 


Using Node Js 
on Windows 

NnrieJ^has been ported to Windows l 
by Microsoft and Joyent, and runs on 
Microsoft's Azure cloud platform. The 
Azure Nndejs SDK can make a 
Windows PC an ideal Modejs 
development platform, with a local 
server and scripts to help manage 
servers. There's even support for 
NPM to install Nodejs modules - and** 
it's all a free download 
in the Microsoft Web 
Platform Installer, 


001 exports.web = function(req t res){ 

002 res.render(’wieb', { title: J A second page' }) 

003 }; 

Adding a new route (3) 

You might think that's all you need to do to get a new route working, 
but there's more to do yet. In the head of our main server we're going to need 
to add some more code to declare a variable for our new route file. Add a 
require line for /routes/web as follows. 

001 var express = require(’express') 

002 , routes = reqyire{ ' ./routes') 

003 , web = requireC ,/routes/web’); 

Adding a new route (4) 

■' We're now ready to add an additional template in the views directory 
for our new web page, We can use the existing indexjade file as the basis for 
the new template. It doesn't have to be particularly complicated, just a title and 
some body text. Create 'web.jade', and add the following content. 


001 hl= title 

002 p Welcome to page 2 

Styling the pages 

Express uses the Jade Nodejs styling engine to handle template 
layout. We've created basic Jade templates tor our pages, now we need to 
look at the master layout.jade file created by Express. This is where we can put 
site- tor section-) wide style information, including CSS and other HTMI.,5 
features. Add HTML formatting as needed. 

001 !!! 

002 htnl 

003 head 

004 titles title 

005 link(rel=" stylesheet’, bref=Vstyle$fieet$/style.t$$') 

006 body ! = body 

Structuring Jade 

I f you look closely at a Jade tern plate, a nd the correspond ing code, you 
can start to see how the two fit together. Values passed to and from a Nadegs. 
function are rendered in pages, and elements prefixed by # are treated as 
01 Vs for use with a stylesheet, if we wanted to render two pieces of text with 
an appropriate DIV ; 

001 #tag #{title) ^message}; 

Which displays as 

001 <div ids M tag JI >[con tent of title] [content of messagej</div> 

Passing values (1) 

Now that we have the basic structure of our server we can start to 
build it into an application. We are going to write a simple server function that 
delivers a DNS lookup for a server name sent as part of a URL. Start by 
defining a new route for our DNSfunctior. 

001 var express = requ ire( ’express') 

002 r routes = require( 1 ./routes") 

003 r lookup = require(/routes/lookup) ; 

Passing values (2) 

Add code to send a value to a new '•. Qokuo.js' file that we're going to 
add to the routes folder, much like we did the file for the second page. 
However, this time we're sending more than just a call to a URL. we're also 
sending a value to parse as part of the URL we're using to cell the server, 

001 app.get( 7' F routes, index); 

002 app.get( J /web", web.web): 

003 app.get('/lookup/ : value, lookup,lookup); 

Passing values (3) 

We can now start to create our new route. You'll notice that we've been 
using app.get for all our routes so far. That's because Nndejs implements 
HTTP's POST and GET functions. We're using GET as we're not working with 
forms, so we can use a query string to pass values from the browser to our 
code. Create a lookups file in toe routes folder. 

001 exports.lookup = functionCreq, res)[ 

002 var dnsriame - rep-pueryCdnslookup 1 ]; 

003 res.render("lookup', {title: 'DNS lookup', dns: 

dnsname}); 
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©04 >; 

©05 

Passing values (4) 

'•^y The most irnDortant bit of code in our lookupjs file is 
the req.query statement. That's where we take the query string 
dnslookup value from the calling URL and convert if into a 
string, called drename string, which we can then use in our 
application, initially just displaying it in a jade template. 

©01 var dnsname = req,query['dnslookup 1 ]; 

Passing values (5) 

Now that we've extracted our data from our URL (eg 

tittp^QilIpiflacallias^^ 

CQ-ukl we are now able to go ahead and display it. We've 
already written ourselves a res.render statement that delivers a 
title and a new variable, dns, set to the dnsname string to a 
lookup.jade template. We can now write a simple template to 
handle the call. Note the #{dns} statement. This will render the 
content of the dns variable, displaying the URL we want to see. 
which is MflMMllfacmuL 



Code library 

Inside serverjs 

The heart of a htodegs-application is the serverjs file. It's here you 
define the structure of your application, and here that you start to put 
together the routes that translate URLs into function calls 


©01 hl= title 
©02 #{dns> 

©03 


Looking up a dns value 

Node.is contains a wide selection of functions we can 
use in our applications - functions that are needed in a server, 
One set handles dns lookups, both forward and reverse. As 
we're extracting a domain name from our query string, we can 
do a reverse lookup to display the IP address of the domain. 
Rewrite Eookupj s to add the following code: 


©01 exports.lookup = functionfreq, res){ 

©02 vac dns - require^'dns r )■ 

©03 var dnsname = req.query('dnslookup']; 

©04 dns-lookgp{ dnsname function (err, address) { 
©05 if (err) { 

©06 console. log( err. toStringQ); 

©07 return; 

©08 } 

©05 dnsvalue = address; 

©10 }); 

©11 res.render('lookup 1 r (title: 'DNS lookup', 
dnstxt: dnsname, dnsnum: dnsvalue)); 

©12 }; 


Displaying the result 

We now need to mod if y our looku p.jade tern plate to 
display the results. We've already put a structure in place with 
our call to res.render, adding a variable dnsnum that's set to 
the dns value string and delivered by the dnslookup function. 
It's simple, then, to go ahead and just add a new line to the 
existing template: 


©01 hl= title 
©02 Jffdnstxt} 
©03 #{dnsnirn} 


The Modules section of a 
tlotleis appl I catl o n is 
where you define the 
various code modules 
you'reusingin youi 
application, either code 
youTe writing, or from 
third parties. 


You 11 use the 
Configuration section to 
define how your 
application will work, 
Including any templating 
engines used. A tool like 
Express will set this up 
for you. 


Finally, the Routes 
section handles the URLs 
users will use to Interact 
with your application. 
Our sample has three 
URLs, which are all 
handled by modules we 
defined earlier. 


001 U Modules 
002 

003 var express = require('express') 

004 , routes = required ./routes') 

005 , web = required ,/routes/web J ) 

006 , lookup - require(' ,/routes/lookup'); 

007 var app = ittodule.exports = express, 
createServer(); 

008 

009 // Configuration 
010 

011 app.configure(functionQ{ 

012 app.set{'viewsi| dirname + '/views'); 

013 app.set('view engine' r ’jade'); 

014 app.use(express.bodyParser0); 

015 app, use (e xpress , methodOve rride()); 

016 app, use (app. router); 

017 app,use(express.static( dirname + V 

public')); 

018 }); 

019 

02 0 app . configu re( J development ' r func tion Q{ 
021 app , use(exp ress. e rro rHa ndler({ 
dumpExceptions; true, shcwStack; true })); 

022 }); 

023 

024 app.configure('production', function(){ 
025 app .use (e xpress.er rorHandle r ()); 

026 }); 

027 

028 U Routes 
029 

030 app.get( r /' s routes.index); 

031 app.get('/web 1 , web,web); 

032 app.get( Vlookni 1 , lookup . lookup) ; 

033 

034 app,listen(process,env r port) ; 
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Championing the talents of 


David Yeiser 

webwww.designintellection.com 



Cuit exit role Founder and designer 
Education B.S. Civil Eng Ineering. Un I verity of Louis vll le 
Expertise Information design. Photoshop. In Design. WordPress. 
HTML CSS. Information architecture 
Clients Wake Forest University. Southern Seminary. Social 
Media Explorer. Pitchbrite 
Twitter @davidyeiser 


David is an information designer from 
Louisville, Kentucky - a decent-sized city in 
the US, just east of the Midwest. Cutting his 
web-design chops with an Angelflre site in the 
late Nineties, he quickly discovered the web as 




lo 
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a medium through which he could fully 
express his creativity. However, as the new 
millennium dawned it seemed that JavaScript 
and Rash ruled all, and so he made the 
decision to move on from Angelflre to learn 
new things and expand his sklllset In 2003, 
while experimenting with a Blogger template 
he accidentally discovered the world of web 
standards, and professes that he has been 
hooked ever since, 

Primarily, David r s workflow revolves around 
designing websites and mobile apps for others 
as a paid service. In addition to this, he Is 
pursuing several commercial product 
endeavours such as packaged website themes 
and apps for Apple's mobile iOS. 

What underlies his interest in the web as a 
medium, and designing for it, is a deep love of 
typography and words. Reading, writing and 
publishing Is a sacred part of our culture and 
heritage, and being part of an industry where 
this historic entity is merging with the latest 
technology is a high privilege, and something 
for which he is very grateful. 

At the moment - like many other designers 
around the world - David is most interested in 
the theory and application of responsive 
design (for more on responsive design see 
Web Designer If 195}; and, of course, the 
continued advancement of typography and 
its usage on the internet. 

In his spare time he enjoys spending time 
with his wife and son, reading, and seeking out 
locally owned restaurants and coffee shops In 
his native Louisville. He secretly hopes to be a 
good writer someday. 



01 

The background and user 
interface are neutral to provide 
contrast with the- shape of the 
country as well as to avoid visual 
fatigue on extended gamepiay 


02 

The individual view of the 
restaurant details accommodates 
varying contexts; contacting 
them, opening times, directions 
and viewing the menu, 


03 

Bold typography and 
high-contrast colour give it a 
contemporary and professional 
presence when compared to 
social media-focused websites. 


04 

A traditional typographic 
hierarchy is implemented to give 
a natural order. Over 1,300 
articles have been published 
using this template. 


05 

Southern Seminary has a rich 
traditional history yet is always on 
the- cusp of technology. To 
undergird this, a classic serif mixes 
wnth a contemporary sans-serif. 
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independent and job-hungry web designers 
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AirtonGroba 

web www.estudionav.com.br 



Current role Creative director and founder of the studio. 
Education Bachelor of Computer Science 
Expertise (Photoshop, Illustrator, InDesign, pen and paper. 
Clients Fischer+Fala, Young & ftubicam, Rapp Collins, Lew 
LaraTBWA 

Twitter @estudbnav 


Born inSaoPaulo, Brazil, Airton Groba began 
his career as an art director and has worked 
for a host of agencies including Euro RSCG 
4D, Y & R Garage Interactive and Energy, 

Along the way he has worked with a number 
of well-known brands such as Skol. Kaiser. 
Toyota. LG. Colgate. Heineken, HIM, Nokia, 
Microsoft Intel. Danone and Goodyear. After 
several years. Airton realised his long-term 
dream when he founded Studio Nav in 2011, 

The studio is focused on design and 
illustration and works with a range of projects 
including web design, the creation of visual 
identity. Illustration, 3D and 2D. 

The studio tends to create different 
platforms, whether online or offline, always 


aiming to deliver the best visual solution for 
their customer The multidisciplinary part of 
the studios day is about creation, Groba says: 
“We are not artists, so we like to wander 
through many styles of illustration only, 
without barriers to creativity: Studio Nav is 
always looking to incorporate new illustration 
techniques, or new ways to organise the layout 
of a site because it believes nothing is wrong 
when it is beautiful to the eye, Now, in 2012, the 
great mission of the studio is to evolve its 
portfolio, The Nav is not limited creatively and 
Is not restricted to Just one style. In the future. 
Studio Nav studio plans to use more photo 
shoots, make more animations and make 
much more use of 3D. 



Ol Campaign artwork 



' Illustrati o n for M ac* m agazine 



P blt-lw/lJMEvffl 



bit.lv/HHrlhb 


Ol 

Artwork created for the retease 
of the LG Optimus 3D 
smartphone makes good use of 
3D text to add depth and 
imagination to the artwork. 


02 

A beautifully out together 
illustration demonstrates the 
visual impact and effect that this 
unique 3D-screen smartphone 
has over its competition. 


03 

Glamour «s an eCommerce store 
that sells fashion. Studio Nav 
created both the back-end 
eCommerce solution and the 
company logo 


04 

The Nav Studio homepage 
adopts full-screen backgrounds 
and aside-scrolling navigation to 
present all the Studio Nav work 
in a flattering light. 


05 

The brick textures and neon sign 
re-create the typical exterior bar 
decoration, creating familiarity and 
making sure visitors know this site 
is about beer. 
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Web talent showcase 
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Keep it simple, 


i i i it Liii iff” i in life & iii i Whim 


about 


Celeste du Preez 

web www.celestedupreez.com 

Current role Freelance designer 

C Education U niverslty ofJohannesburg, National Diploma {3 year). 
Graphic Design 

Expertise Digital design, Information architecture, brand Identity 
design, Accessible Si W30compliant XHTML & CSS, 
custom-built Word Press themes 

Clients .-: 11 ,■ linesscin. Dm: y. xnan. Lisa S• cit>k • l-r •• 

Love Film 

Twitter @Celestedu Preez 


Keep it simple' is Celestes mantra - in both 
design and in life. She is a creative thinker 
through and through and her web design lives 
up to this philosophy. There is a simple, clean 
elegance to everything she does and not just 
the look and feel of her designs. 

Her work blends both her passion for 
creating beautiful things with a drive to make 
stuff that, frankly, just works well. Celeste is a 
self-confessed usability evangelist. 'Don't Make 
Me Think ’ by Steve Krug is her blble. When she 
graduated In 1998, the Internet and web 
design Industry was still very much In Its 
infancy. It was the Wild West in those days; 
web standards and usability guidelines didn't 
really exist yet and the browser wars were in 


full swing. My view was, and is. that if someone 
cant use a website they will just go elsewhere. 
Usability a I ways affects a client's bottom line in 
terms of conversions, so it's essential to plan 
and build something that works." .After building 
her first website, she was certlfiably hooked. 13 
years on. she s - . II ■ :n oys how. on ;; day to day 
basis, a web design project evolves from an 
idea to a functional and interactive experience. 
The internet inspires her love of freedom of 
expression and sharing ideas and the sense of 
community resonates strongly with her 
personal values. Although Celeste specialises 
in creating brands and websites for small 
businesses, she is regularly sought after by the 
big agencies too. 





OS Client mockup 


01 

A WordPress portfolio site tnat 
uses a single page to tell a story 
The little girl logo creates a 
common theme between the 
different sections of the site. 


02 

SSP 6 an Independent marketer 
to the arts sector. The site uses a 
hold and simple custom 
WordPress theme to portray the 
company message. 


03 

A WordPress portfolio site that 
has been built around the print 
blocks logo. The colour scheme 
and textures add to the 
ambience of the page. 


04 

This site is based on Celeste's 
drawings over a year. A vintage 
wallpaper background, paper 
textures and hand-drawn copy 
create an informal feel. 


05 

The client for this mockup is a da ta 
architect, and a grid background 
texture was used to reflect this. 
Plenty of space helps users absorb 
the on-screen Information. 
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2012’s HOTTEST FONT COMBINATIONS, THE LATEST WEB TYPOGRAPHY 
TECHNIQUES AND HOW TO CHOOSE THE RIGHT FONT FOR YOUR PROJECT 



CREATE STYLISH AND ADD RIBBON 

RESPONSIVE HTML5 FORMS TAGS WITH CSS3 

Beautifully responsive forms Have Get graphical with CSS3 and our 

never been easier expert advice 



TIPS 

FOR DESIGNERS 


Essential tips and 
techniques every web 
designer should know 



Wj Rd 



Iai imomAi rlH 


L-frvfl £ ^ 
Iporte 1 

The Pai 
iAi Church 
St Pete 


GOOGLE MAPS 
-YOUR WAY 

impress clients with customised 
directions right into your lobby 


Visit the WEB DESIGNER online shop at ALL IN YOUR LATEST 


imagjneshop.no.uk 

for back issues, books and merchandise 


WEB DESIGNER 


Issue 198 on sale 

Thursday 28 June 2012 


next month 
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designer Subscriptions Voucher 


ivfYES! I would like to subscribe to Web Designer 

Your details 

Titter_First name_ 

S urna me_ 

Address_ 




Postcode 

Country 


Telephone number. 

Mobile number_ 

Email address,_ 


Please complete your email address to receive news and special offers 

Direct Debit Payment 

_] UK Direct Debit payment 

Iwtit receive my lint (tire* issues for Just E5,1 will Uicn pay only £25,15 every Six isstics fianaf lef. If, tfoWtvcr, lefo not 
love what I see, [can cancel at any time. 



YOUR EXCLUSIVE READER PR ICE 1 YEAR (13 ISSUES) 

I UK £62.30 (Save 20%) 1 Europe £70 World £80 


Cheque 

1 I enclose a cheque for £_ 

(made payable to Imagine Publishing Ltd) 


Credit/Debit Card 

~~l Visa I MasterCard 


Card number 

1111111111111 


I Amex 


Maestro 
Expiry date 


Security number_I_I i_ 


(last three digits on the strip at the bade of t he card} 


Issue number_ I HI Of Maestro) 


Signed.__ 

Date_ 

Code: PGG197 

□ Tick ths box, if you do not wish to receive any promotional material from imagine Publishing Ltd. 

□ Tick this box if you do not wish to receive promotional material from other companies, 

Term 5 and conditions apply. We putfch13 issues a year Volt subscription will start from the next available 
issue unless otherwise rdcated Direct Debit-guarantee details available on request This offer expires 
without notice 

I would like rrty subscription to start from issue; I_I_I 

Return this order form to: 

Web Designer Subscriptions Department800 Guillat Avenue, 

Kent Science Park, Sittlngbourne, ME9 8GU, or email it to 
wehrf Mign er<a servireh elnl i nfeCO.uk 



GO DIGITAL! 


GREAT DIGITAL SUBSCRIPTION 
OFFERS AVAILABLE AT: 


imaginesubs.co.uk 

FOR ANDROID, MAC, PC 
iPHONE & iPAD 


FANTASTIC 

SUBSCRIBER 

OFFER 

Subscribe today and 
get your first three 
issues for only £5 

Pay only £4.19 for every future issue 
- a 30% saving on the store price 
Free UK delivery to your door 
il Never miss an issue 
Money-back guarantee 


*Terms & Conditions 

This offer entitles new UK direct debit subscribers to receive their 
first three issues for £5. After these issues, subscribers will then pay 
£25.15 ever y six issues. Subscribers can cancel this subscri ptton 
at any time. New subscriptions will start from the next available 
issue, Offer code PGG197 must be quoted to receive this special 
subscription price. Details of the direct debit guarantee are available 
on request Offer expires 31 August 2012 Imagine Publishing 
reserves the rig ht to limit this type of offer to one per household, 
Sour ce code; PG G197 


Tel: 06448488413 


Manage your subscription account online at wwwJmaginesubsxo.uk 
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WORDPRESS 
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ADOBE CS6 FIRST-LOOK 


Get your first 3 issues for 
just £E , then save 30% 

on each future issue 


THREE EASY WAYS TO SUBSCRIBE 


1. Online 

Order via credit or debit card, just visit: 

www.imaqinesubs.co.uk/wed 

and enter code PGG197 

2. Telephone 

Order by phone Just call: 

08448488413 

Overseas: +44 (0) 1795 592 878 and quote code PGG197 


3. Post or email 

Please complete the form and post it to: 

Web Designer Subscriptions, 

800 Guillat Avenue, 

Kent Science Park, 

Sittingbourne, ME9 8GU 

Alternatively, scan and email the form to: 

webdesigner@servicehelpline.co.uk 
































In association with 



0 * nt r Our web-hosting guide is brought to you in association with 

% 'c Fast hosts, the UK's leading reseller web-hosting provider 


* Unlimited websites 

• Unlimitedbandwidth 




* Unlimited web space 


" Use your own brand throughout 
- 24/7 expert UK-based support 
* No-risk trial - 3 months free 


I Hosting listings 


Got a deal 
you think we 
should list? 


Whether you're a hosting firm keen to promote vour 
products ore happy customer who wants a favourite 
provider to be lifted, drop us a line with the details! 

we brl fisianfi-rraii rrwci ine-n i j hi i s hi na.ro.Lik 


NAME AND URL 


Keep an eye on the latest packages and 

deals with our comprehensive list of service providers 



1&1 


I & 11nternet Ltd. 


1£r1 Starter {Linux) 

1&1 Standard (Linux) 

1&1 Standard (M&) 

1&1 Unlimited (LlnuK) 0B44 3351211 
1&1 Unlimited (MS) 0844 33S1211 

1&1 Business (Linux) 

16p 1 Business (MS) 


08443351211 
00443351211 
0844 3351211 


0844 3351211 
08443351211 


£20.88 5GB Unlimited 1.000 / X / / / / / 

£50.08 50GB Unlimited 3,000 / / / J J / S 

E7I.88 50GB Unlimited 3,000 / ft S S S S / 

£83.88 Unlimited Unlimited 5,000 / / / S / / S 

£107,88 Unlimited Unlimited 5,000 / X / / S S / 

E11S.88 Unlimited Unlimited Unlimited J J J / / / / 

£15588 Unsmited Unlimited Unlimited / X / / S s / x 


: f 111WebHost.com Ur*mted Web Nesting Pack N/A 
http:ff111webhcat.com starter Web Hosting Pack N/A 

Budget Web Hosting Pack N/A 

WordPres&Wih Hasting Pack N/A 
DrupalWeb Hosting Pack N/A 
Joomla! Web Hosting Pack N/A 
taGoniiiKreeVifebHaitfetgPKk N/A 
ZenCart Web Hoshng Pack N/A 
PreStaSrop Web Hostiig Pack N/A 


£60 Unlimited Lnlimltad Unlimited / 


£30 

£12 

£24 

£24 

£24 

£24 

£24 

£24 


5GB 

1GB 

5GB 

5GB 

5GB 

5GB 

5GB 

5GB 


2GB 

1GB 

2GB 

2GB 

2GB 

2GB 

2GB 

2GB 


100 

5 

100 

100 

100 

100 

100 

100 


123-reg 
123-nag f wivw.12.3-rftg .ci i 



2O20Menlln (wwjw MTMWuull* wwl 
2020Medla ( www,3fl2flmftrtl;».cniiil 
2020Medla (wwwOaaO«Hwlla«m> 
2O20Medla t 



-10 Data Centres ( ww^ 4d hp s t 1 nfljwri > 
Btackrocit HasLIng Ltd hrnir hlartlMyfljJk) 
BlacKFoot Hosting Ltd (> 

Blaefcfoot Hosting Ltd i; 

Blaekroot Hasting Ud LainuihimtrflnLfAJjl^ 
ainctnight {«j 
BJadcnighE l> 

QiacKnight (» 

BravoM (hi 

Brawl 4 i: h it p i# l>nw<i i4H Xnti H > 

Braw14(hi 
Braw14(M 


Brnvn14 (MIpffhriiwnHfi 


Jjk> 



□csignwnsp ( h tLp V/d ai 


SlnrLw 

Plus 

Pro 

BUS PfO 
Plus (MS) 

Pro (MS] 

Bus Pi n (MS) 

Light User 
Everyday 
Budness/ftc 
JAVA Icmcat 

AlPMftl 

Bronze Packs 

Silver P.icfcngi* 

Gold Package 

Titanium Package 

Reseller Package 

Home 

Business 

eCommerce 

Prolesslonal 

Minimus 

HiAit 

Ma»mus 

Starter Linux 

Starter WMows 

Business Linux 

Business Windows 

Ullimnlr Linux 

Ullunnl^ Winrinws 

Entry 

Home 

Business 

Business Plus 

Starter 


08459590018 £29.88 1GB 

0845 059 MIS ESSSS 5GB 

0845 659 MIS E1Q7.BB 10GB 

0845 B99 0018 fl79.BE 20GB 

0B45B59OO18 E59.BS 2GB 

03450590018 £107.86 5GB 

03450590018 £179.88 10GB 

037022120^0 £45 30MB 

08703212020 £100 200M& 

0870 3212020 £275 500M& 

03703212020 £500 100MB 

03703212020 E275 100MB 

0345163 3533 £40 10MB 

0345166858* £84,99 20MB 

08451838533 £79.99 SOME 

0845166 8306 £149.99 500M& 

08451688388 £299.99 1GB 

N/A £10 500MB 

N/A £50 1GB 

N/A £100 2GB 

N/A £150 5GB 

55359 9133072 £45 1QG9 

55359 9183072 £79 20GB 

35359 9183072 £45 30GB 

N/A E13C 2.000MB 

N/A £20 2.000MB 

N/A £45 4.OO0MB 

N/A £45 4,000MB. 

N/A E8Q (Jnfcnlleri 

N/A E80 Untanilrri 

0645 468 2100 £i9 2S SOOMB 

0S45 468 2100 £50M 3GB 

08451362100 £55.94 I2CB 

0845 466 2100 £77.94 24GB 

08445729348 £50 5GB 

0844 572 9848 £40 10GB 

0844 572 9848 £80 Untanilcri 


5GB 20 

50GB 5M / 

100GB 750 / 

Unlfenlted 1,000 y 

25GB 100 y 

50GB 500 J 

1S0GB 1,000 J 

1GB 2 J J 

10GB 15 / / 

20GB 50 / / 

3GB 15 / / 

3GB 15 y / 

500MB 2 y 

2GB ID J 

2GB 50 J 

5GB EM V 

10GB 1.000 / 

5GB 5 ■i / 

2D&B IDO y y 

40GB 200 y y 

60GB 300 y/ 

2QDGB UnSmiled J / 

400GB Unimiled J / 

600GB LUmmlted / / 

2.000MB ID y / 

2.000MB ID y y 

4,000MB 4,000 J / 

4,000MB 4,000 J J 

Unlanlted UnJImilcd / / 

Unfcnlted Unllmiled / / 

5GB 75 / 

30GB 30 V / 

I50GB 600 y y 

250GB Unfimlled y y 

20 GB l.ooo y y 

5068 10,000 y y 

Unlimited Unlimiled J / 


y y y y 

/ y y y 

y y y y 

y y y y 

y y y y 

y y y y 

y y y y 

y y j j j 
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y y y y y 
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Get your listing highlighted! Contact Richard 
Q richard.rust@imagine-piiblishing.co.uk 
0 +44(0)1202586436 hosting listings 


Featured host of the month: Blackfoot Hosting www.blackfoot.co.uk 



ifC ww w i a uro^MlMwliCDm) 



BrohHUigCj 
Glacom 


Offering moire reasons for choosing one of the listed providers 

Blackfoot is an experienced UK-based web-hosting provider and first-dass delivery. Hosting options are available in five flavours 

with a proven ped igree i n offering hosting a nd doma in name rangi ng from the entry-fevel Home sol utfon for £40 per year, up to 

registration services si nee 1999, Specialising in Linux based the power ful eCommei ce r Professional and Partner packages priced 

servers, housed across three London data centres, Blackfoot promises between £ 100 •2 1 00. All come with access to the feature-packed dPameJ 

24/7 monitoring and a ded icated support team to guarantee uptime control panel for intuitive maintenance. 




Windows Unlimited 
Windows Home 
CheapHost 
Personal 

Plus 


8u area Protesslonai 
EPonre Linux 
Gold Linux 
Bronze Windows 
Gold Windows 
Reseller Unix 
Reseller Windows 
Enterprise 
Commerce 
Designer 
Developer 
Starter 
Personal 

Eq>tf| 

Virtual 

8ronze 

Silver 

Gold 

Platinum 

EmallQnly 

Eiien LI nl 

Superior 

Premium 

Starter 

Home 


eCommerce 
Buii neaa Pro 


0844372 934S 
0644 372 9348 
0344372 9348 
01865 5B9 990 
01S65589 990 
O1M5 509 990 
01S655B9 990 
0141 261 2252 
0191 261 2252 
0191 261 2252 
0191 261 2252 
0345 226 5566 
0345 2265566 
0345 2265566 
08452265566 
0345 2265566 
0345 2265566 
0344999 4100 
034 4 999 4100 
03449994100 
03449994100 
01213144*65 
01213144S65 
0121 314 4865 
0121 3144865 
Q23SO 249 823 
02230 249 323 
02230 249 323 
02330 249323 


0300542 7500 



£43 

£103 

£132 

□0 

£100 

£30 

£100 

£399.99 

£499.99 

E39.99 

£179.99 

£119.99 

059.99 

£23.33 

£59.38 

£95.33 

£227.33 

£30 

£42 

£72 

£114 

£40 

£75 

£140 

£250 

£29.99 

E54.99 

E79.99 

£159.99 

£199 


Unlinked 

5GB 

Unlimited 

1MMB 

500HB 

ltHJMB 

500MB 

Unlimited 

Unlinked 

1GB 


1GB 
2.5GB 
5GB 
5 OGB 
20QM3 
400MB 
800MB 
1,200MB 
1GB 
2GB 
5GB 
10GB 
500MB 
Z5GB 
6.5GB 
30GB 
KJdMB 


Unlimited 

5DGB 

KKJMB 

Unlimited 

Unlinked 

Unlinked 

Unlinked 


1GB 

5GB 

Unlimited 

Unlinked 

2GB 

SOB 

2GB 

5GB 

25GB 

Unlimited 

Unlinked 

Unlinked 

2GB 

5GB 

10GB 

40GB 

2GB 

5GB 

10GB 

25GB 

1GB 

30GB 

Unlimited 

Urifimited 

2GB 


10DO 

Unimlted 


Uriimlled 

Unkmiled 

250 

500 

250 

500 


10 


250 

Unimileri 


UnM Hilled 
Unimited 



Personal Standard 

0644 563 0777 

£5368 

5GB 

Unlimfted 

500 

S 

A 

/ 

S 

J 

/ 


A 


Business Standard 

0644 563 0777 

£95,86 

2506 

Unlimited 

IjOOO 

s 

Option 

/ 

S 

J 

/ 


A 


Business Premium 

0844 503 0777 

£173.86 

50GB 

Unlimited 

Unlimited 

s 

/ 

/ 


/ 

/ 

S 

A 

Fasthosts 

WD Starter Reseller 

0644 563 0777 

£149.99 

20GB 

Unlimited 

Unlimited 


Option 

Option 


/ 

/ 


A 

www fs^fhn^K cn t lie 

Advanced Reseller 

0644 583 0777 

£199.99 

Unlimited 

Unlimited 

Unlimited 


Option 

Option 


/ 



A 



Starter Professional 
Home Professional 
Bv tsiitii Pr*1essitmal 
Reseller PndesHanBl 
Silver 
Gold 
Gold Plus 
Platinum 
Platinum Plus 
Email Plus 
Prolesslonal 
Advanced 
Enterprise 
Professional Plus 
Premium Pirs 
Enterprise Plus 


0345 644 7750 
0645644 7750 
03456447750 
03456447750 
0303130 1390 
03091301330 
08081801080 
08081801880 
06061601660 
06061601060 
0845 0099175 
03450099175 
0345 0099125 
0845 0098175 
0845 0098175 
0645 0099175 


£29.00 

£39.99 

£129.99 

£299.99 

£79.50 

£139.50 

£109.50 

£358,50 

£599.50 

£49.95 

DO 

£50 

£80 

£90 

£150 

□00 


2J5G& 
10GB 
Unlimited 
Unlimited 
150 MG 
300MB 
45OM0 
COOMB 
1.2GB 
50MB 
25GMB 
2GB 
2GB 
500MB 
1GB 
ZGB 


10&B 
50GB 
Unlimited 
Unlimited 
3GB 
5GB 
10GB 
20GB 
40GB 
NM 
1GB 
25GB 
50QM3 
5GB 
12.5GB 
2 DOB 


1.000 

10,000 

Unlimited 

Unimiled 


150 

Unimiled 

100 

500 

UnMmlted 


Option 

Option 

Option 

Option 

Option 

NfA 


WA 

option 

nplinn 

nplinn 

option 

■option 

option 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK's leading reseller web-hosting provider 
• Unlimited websites * Use your own brand throughout 
•Unlimitedbandwidth - 24/7 expert UK-based support 
•Unlimited web space * No risk trial - 3 months free 

I Hosting list ings 

Keep an eye on the latest packages 

and deals with our comprehensive list of service providers 



Discover what an enhanced 
listing can do for your 
business. Contact Richard on: 

0+44(0)1202586436 

Continued.- 


NAME AND URL 


IQJK ^wnd£Uk ti MJl nf | i "hi i l l 1 
fOJKw 
ICJJKw 



JAB Web Hosting hawwlahr* 


JAB Web Hosting tww 
JAB Web Hosting frv■■■■■■.| 
LCN (i 
LCtt (i 
tCWCv 




Starter 

Starter 

Dynamic 

Premium 

UiWmtted 

LD Budget fLiriUK) 

LD Home (Linux] 

LD Pm (Linux} 

LD Unlimited (UnusO 
Windows Home 
Windows Unlimited 
Shared-Server Pro 
Shared-Server Advanced 


0845009 9175 
08450099175 
08450066175 
08M 0«0153 
0800 0«0153 
0800 0130153 
0800 0430153 
0800 0430153 
01439 342 490 
01439 M2 490 
01468342 460 
01438343190 
01438343190 
01438343190 
07-B91 235050 
07B91 235050 
07991 235059 
07681265B5B 
07691235056 
07891 235B5B 
tl 310 041 5500 
+1310 041 5500 


ANameHOG 

** AffnrdablB Irrtirmot 9c'irtioc™ 

Namehog i 


EMAIL ONLY 01G04212 904 £11.99 2.5GB 15GB 10 ttSSSSSS 

STARTER 01604212 904 06.99 10GB 150GB Unlimited J jc S / S S / / 

HOME PRO 01604212 904 £5&99 25GB Unlimited Unlimited / 

BUSINESS 01604212 904 £109.99 Unlimited Unlimited Unlimited / ///✓/// 


Startup Plus 
Business, 
Business Plus 
Designer 
Designer Plus 


0845 353 3533. E89.99 MOM B 5G0 10 

OS45 353 3633 £149.99 2,000MB 20GB 100 

OS45 363 3633 E83.9B 3,000MB 30GB 300 

08453633633 £239 90 1GB 20GB 200 

084113635632 £476 66 Unturned 60GB Unlimited 


[^j METCeTSRR 

DEVELOPER 

0800 0612801 

£32.09 

1GB 

Unlimited 

500 

y 

/ 

y 

/ 

y 

y 

y 

y 

ONE 

0800 0612801 

£109.99 

5GB 

Unlimited 

tooo 

/ 

/ 

y 

y 

y 

y 

y 

y 

RESELLER 

0800 0612801 

£274-89 

Unlimited 

Unlimited 

1000 

/ 

/ 

y 

y 

y 

y 

/ 

/ 

N etcetera 

VM500 Server 

0600 0612801 

£300 

20GB 

Unlimited 

Unlimited 

/ 

/ 

y 

/ 

y 

y 

/ 

/ 


2200DC Server 

0600 0612801 

£720 

160GB 

Unlimited 

Unlimited 

y 

/ 

y 

y 

y 

y 

y 

y 


3000DC Server 

0800 0612801 

£1,200 

2x500GB 

Unlimited 

Unlimited 

V 

/ 

y 

/ 

y 

y 

y 

y 


260QQC Server 

0800 0612801 

EljBOO 

2x50OGB 

Unlimited 

Unlimited 

/ 


y 

y 

y 

y 

y 

y 

Hetplan {wwnw.nB4tlan.co,uk) 

Shared 100 

02071000124 

£60 

lOOMB 

1GB 

5 

/ 

/ 

/ 

y 

/ 

/ 

/ 

y 

Netplan Laa.ai..nel|3ian..rniJkJ 

V5IOO 

0207 1DOO 124 

£600 

5GB 

5GB 

5 

/ 

y 

/ 

y 

/ 

y 

y 

y 


Netp 

Netp 

Netp 

Pkirp 

Pkirp 



PurplePaw tw.*«.purp!epaw 
R-edUex UK (r 
Reddest UK (v 
RetWot UK (ww wreddewA i Com ) 

Skvmnrkel f wwrwjkym arifM mnU 
Skvmerket skymamw 


V5200 

VS300 

Dedicated Servers 
Email 

Play 

Plus 

Power 

R3 Reseller 

Reddest Design Starter 

Redder Design Business 

KetWex DesitF* Premium 

Standard 1 

Standard! 


0207 1DOO 124 
0207 1000 424 
0207 1000 424 
M/A 
N/A 

M/A 

M/A 

M/A 

0843 289 4625 
0843 2S9 4625 
0843 2664625 
0800 3217798 
0800 3317798 


□ .000 
£3.000 
£3,000+ 
£25 
£40 
£65 


£IB 

£5a0S 

£107,60 

£49 

£69 


10GB 

15GB 

73GB+ 

fDQMB 

IDOklB 

7SOM0 

2GB 

10GB 

1GB 


IO MB 

20MB 


10GB 

50GB 

1,500GB 

1G9 

1GB 

5GB 

10GB 

50GB 

Unlimited 

Unlimited 

Unlimited 

2GB 
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In association with 



Get your listing Contact Richard 

Q ridiardJiist@imagme-publishing.co.uk 


I 


Can you 
recommend 
your host? 


Tweet us today with your 
hosting comments and advice 

@WebDesignerMag 


NAME ANDURL 


Skymartei fwMWLfLit 



STRATO 

srRATQ Hosting 
srRATQ Hosting tuittt Uratn-hmling rjjjjjf i 

St r ai m ll na,rwl C www ,t li« a nn fc ntt . n *t3 





TwentyHosl t ww Mw A wB ntvh o*t. o &y kJ 

VARi HOST 

VAR! HOST t aw w w a tlM M. lJMU 



Premluml 
Premium 2 
STRATA BasIcWeh 
STRATA PowerWeb 
STRATO AdMantedWefc 
STRATA entfitprteMteb 
Trial (3 month} 

Starter 

Pius 

Multisite 


OSAO-3217708 
OSAO 321 7708, 
00300 SM7 0070 
008008007 0070 
008008007 0070 
003008007 0070 
0844^411000 
03449411000 
03449411000 
0844-94-11000 
08449411000 


Swish Hosting (wv 


Email 

03445 67 6971 

£18 

Unlimited 

Uni rallied 



s 

/ 

/ 

/ 

/ 

/ 


Windows Hosting 

08445676071 

£66 

Unlimited 

Unamitad 

/ 


/ 

y 

/ 

/ 

y 

y 



UnUX Hosting 

08445676071 

£66 

Unlimited 

Unamlted 

/ 

/ 

/ 

s 

y 

/ 

/ 

y 



eGommerce 

0944567 69 71 

£90 

Unlimited 

Unlimited 

J 

S 

/ 

J 

y 

s 

/ 

y 



SlteBuildet 

08445676971 

£12 

Unlimited 

Uni rallied 

J 


J ■ 

y 

y 

y 

y 

y 


Switch Standard 
Switch Business 
6ki si ness Pro 
Parking 

Forwarding 
Hosting 
BaslcSS 
5tandard55 
aesmessSS 
Advanced^ 
WnrdPress Bruin 
WordPress Plus 
WordPress Extra 


0151236 9111 
0151236 9111 
0151236 &111 
0870 76S 6364 
087-07656364 
087-07655364 
0345 641 0776 
0345 641 0776 
0S45 6410776 
0S45 6410776 
02081447057 
02081447057 
02081447057 


£159 
£249 
£340.06 
£52,0& 

Frnm £15 
From £750 
£24 
£45 
£70 
£110 
£4780 
£71.aS 
£119.88 


1GB 
10GH 
20GB 
25MB 
N IA 
NiA 
100MB 
200MB 
500M& 
1.0A0M& 
2GB 
4GB 

unlimited 


5DGB 

■50GB 

30MB 

500MB 

500M3 

Ni'A 

1,500MB 
3U0DDMB 
7.500MS 
IS.00AM B 
10GB 
10OGB 
Unlimited 


500 

1500 

500A 

15 

N/A 


100 

20A 




Fusion Professional 

Fusion Business 

0345130 1602 

08451301602 

£107.40 

£170,40 

5GB 

10GB 

50GB 

150GB 

1,000 

WAO 

y 

/ 


y 

/ 

y 

y 

y 

y 

/ 

y 

V 

/ 




WefcFuslon twww,weWuElon.« 


Fusion &ev€*oper 

0845 130 1602 

£227.40 

20GB 

30MB 

5.0AQ 

/ 


y 

y 

y 

J 

/ 



UlU 

Fusion RkskUkt 

0845 130 1602 

£339 99 

Unlinked 

Unlimited 

Unkmited 

J 


y 

y 

y 

s 

y 


W eh Wii twww:webwiJ.-t£kUlA 


Windows Starter 

0844 35B 1450 

£6995 

1GB 

25GB 

100 

J 

/ 

J 

y 

y 

s 

/ 

j 

WefcWiitwww.webwli.ru.ukJ 


Windows Professional 

0844356 1450 

£149.95 

4GB 

100GB 

500 

J 

y 

y 

y 

y 

/ 


s 

Wefc Wlz CwwmwehwteflMtH 


Windows Starter Reseller 

084-4356 1450 

£199.95 

5GB 

25GB 

500 

S 

/ 

y 

/ 

y 

/ 

/ 

/ 

Wefc Wiz fwww,webwlz.cauki 


Windows Business Reseller 

084435614.50 


20GB 

20MB 

5.000 

/ 

/ 

/ 

y 

y 

/ 

/ 

/ 

Zefcrs internet twww.zebralntwnaLeom} 

Starts* Pro 

m 

£1000 

5GB 

40GB 

50 

/ 


/ 

y 


/ 

/ 

y 



Business Pn> 

W/A 

E 4 6.99 

10GB 

80GB 

5QO 

y 

y 

y 

y 


/ 

v' 

/ 

Irhmlnl^rnrt (www^-KhrsInS* 


UlEimaflr Pro 

WA 

£79.99 

Unlinked 

Unlimited 

Unimiled 

y 

y 

y 

y 


V' 

y 

/ 


Zen Internet WWW.Zefl.COJit 


Bronze (Linux) 

0S4S05S9000 

M7S0 

2GB 

20GB 

10 


y 

y 

y 

y 

y 

y 

X 

Sliver (Linux) 

034505S90CX) 

£95.88 

5GB 

50GB 

S 

/ 

y 

y 

y 

y 

y 

y 

X 

Gold (Linux) 

08450589000 

£143.88 

10GB 

100GB 

50 

y 

y 

y 

y 

y 

y 

y 

X 

Platinum (Linux) 

08450589000 

£239.38 

50GB 

250GB 

100 

y 

y 

y 

y 

y 

y 

y 

X 

Reseller (Linux) 

0645 058 9000 

£479,68 

150GB 

SOOGB 

250 

y 

y 

y 

y 

y 

y 

y 

X 

Designer (Windows) 

0645 058 9000 

£59,88 

2GB 

20GB 


/ 

X 

X 

y 

y 

y 

y 

X 

Developer CWinfiows} 

0S4S OSS 9000 

£179.06 

10GB 

100GES 


y 

X 

X 

y 

y 

y 

y 

X 


Golden rules to top hosting We identify and explain the key criteria for success... 


The best 

resources for you 

Selecting your ideal package i$ largely 
determined by the Kinds df resourced and quantity 
of features you reciLirefrom your busting solution. 
Key criteria like web space aid monthly band width 
are Important tor those services likely lo be 
subjected to heavy amounts erf traffic, which is 
why package solutions for enterprise appJcatJons 
are typical/much more expensive. The general 
rule of thumb >s net to buy more than you need or 
underestimate potential requirements... 


Competitive 
and reliable 

Hie hating market U big business and 
hosting providers do try to drive prices down 
in a bid to entice your custom. Use air chart to 
compare costs, Put be sure to visit the vendor 
websites to keep hack of die latest deals, as 
they change. Remember that low puce should 
not always be a deomrigi factor and that paying 
a premium for a more tenable, trusted and 
experienced vendor can offer you much better 
value for money in the long term. 


Putting you 
incontcol 

Modern hosting is dll about giving 
customers the power to set up, monitor grid 
maintain their web space" with minimal fuss. Most 
commercial vendors offei acce-ss to award- winning 
aid intuitive centred panels that enable you to log 
in remotely and intuitively tweak ycur account, 
without the need to relay complicated instructions 
down the phone. 8e sure to find out from your 
potential host as much as you can about the 
control panel and request a demo. 


Fantastic 
customer support 

If dll else fails arid you need some 
extra help to get your hooting back online, then 
a commitment to future customer support Is key. 
Many vendors offer a service-level agreement 
which outlines what you can expect here, however 
most will be more explicit about whether phone 
support <s deluded or email contact is preferred. 
Think about what you need for peace of mind and 
factor good, comprehensive technical support 
against the price. 
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offer 

\3SA 

teafl® 8 




Subscribe now and get 

f l ISSUES FREE* 


The only magazine you need to design and develop stunning websites 





iermag coUk 


y^ebdesignt 


vAiyJW^ 




__ B 


Lock back doors 


Avoid vul nerabilities 


AT ciEir^x - 
tramlt^awajd 

agency 


Subscribe now 

Online 

Order by visiting: 

www.imaginesubs.co.uk/wed 

and enter USA5 to get this ©elusive offer! 

Telephone 

Order by phone. Just call: 

+44(0)1795592878 

and quote USA5 






• • 


• •• 


»• 






mi 




& 


r 


mu. 

mask 

TERMS & CONDITIONS 

’This isa US subscription often please don't forget to quote USAS 
when ordering. You will actually be thaiged £60 sterling for an annual 
subscnpton. This is equivalent to $94 at the time of writing, although 
tJie exchange rate may vary Seven free issues refers to the newsstand 
price of $1499 for 13 issues totalling $194.87 compared with $94 (or a 
subscription. Your subscription wil start from the next available issue 
Latest offer is based on newsstand price of $1499 per issue compared 
with $723through this-offer. 

This offer expires 31 August 2 012. 











web designer classified advertising 01202 586436 


nopxfe Tier- 0Wl " w6 

Everything you need to work better 
online from Fasthosts 

That's not just a web-hosting package, a domain name, a virtual or 

WiTH 

sBcutfS 

l^OfMOLOC/ 

dedicated server, broadband, hosted email or online backup, lt*s secure 
tech nology that p rotects you r bu s Ine s s. 

There's lots to worry about when you run a business. But you don't have 
to worry about the safety of your business-critical Information. 

You don't even have to worry about the safely of the information that 
isn't that critical. Whichever service you choose from Fasthosts, you'll 
get the peace of mind that comes from secure, UK data centres. 

Plus, with up to 7Q Q /o 0/jf "selected products there's no better time 
to buy. 

Find out how your business can work better online 

call free on 0800 6520444 or visit www.fasthasts.co.uk 

fasthosts 


hosting | domains | dedicated &virtuat servers | reseller hosting | online backup 


4. ?Ct2 All rights rr-MTY?tt ‘ViSlhaSK amt the Fa*h&StS logo arc Trademarks o J CaStftoSK IMarf>tiL Ltd. 

•ci'fcf vctlcti to & inrnmL(n 12 pmti contract, Turns, A Cord uau apply, see J « (tetri As. 




GO» 

COMPILA 


no risk, money bock guarantee! 



mm 


ft il jit ii {liijfiijjfl 

HI 11 

UiM Hu 


Premium Web Hosting 

Our hosting plans come with the following features as standard: 

* cPonel control panel 

» FREE Web applications 

* SPRM/Virus protection for email 

* Daily backups - multiple restore points 

Utilising OoudLinux For rock solid stability and high performance, 
your website is in safe hands with us. 

from £3 ,99 per month 


Web Hosting Reseller plans VPS Managed Servers 













web designer 


Bandwidth Limit Exceeded 


This advertisement is too popular and cannot be displayed 
due to reaching its bandwidth limit. 

Please try again later. 


Don’t let this happen to your website with UNLIMITED TRAFFIC for 
as little as £2.50 per month (inc VAT) at www.111 webhosleom 










classified advertising 01202 586436 




lOOmb 


500mb 


2,000m b 


cPanel Accelerated & Softaculous Script Library 


Business Level User & Server Support Package 


MB HOSTING 

mm tesems 


designers prefer it 


Place an order now and your new plan will be 
active and ready to use within 10 minutes. 

www.TidvWebHostina.co.uk 


Tidy Web Hosting is a trading name of Poldings Limited 

Registered in England & Wales {S935455). All prices subject to VAT. Cali: 0844 8849100 


Relax 

We take care of the server, leaving you 
free to focus on building websites. 

...... H>u're | n Control 

W€ I prov.de ell the tools you need to 
setup and manage your websites. 

We're Here to Help 
Our team will provide support to you ana 
youSeague, when you need ,t most. 


^ for P 2 0 %off eWD20 


PostcodeAnywhere 

The easiest way to add features to your website* 

UK & international addressing | Address cleansing 
Payment validation | Customer profiling 
Store finder 


To find out mare: 

Call; 0800 047 0495 
www. po stcod eanywh ere. co m 
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trade secret 

noun {c} -tred si kriht - A secret formula, method, or device that gives one an advantage over competitors. 

Low cost address lookup for your website 


Buy online from £15 + v*t ^ 

Eliminate spelling mistakes ^ 

4 Reduced abandoned carts 4 


80% reduction of keystrokes entering addresses 
Create a professional image for your clients 
Simple integration with SDK & working example 


for more details visit post cod 6-s oft wa re.net or can 0845 83 82 666 
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Shoot, edit & share bel 


I] /iPad /iPhone >t Android phone /Androidtablet /Apple Mac / Windows PC 


E*p'° re 


greatdgitalma^N - Jho official download website of Imagine Publistl 



ip™™ 



































No Disc. No Problem 

Many of the files you’re looking for can be 
found on the magazine’s website 

Imagine digital editions t 0 get the most out of your digital 

° ° . editions, be sure to enjoy all of our 

i are a new and exciting fantastic features, including: 

\ way to experience our * Zoomable text and pictures 

) world-leading magazines ! 532*3 

' and bookazines. • Take your collection with you 

• Read offline 



imagnx^ookSbop ImagjrieSuba lmagir*e$ho§i 


pr pnoios 


psiirt 

fr 

if 


£□ 

If! 


To buy more Imagine digital editions and for the 
latest issues and best offers, please go to 


ww w.G reat D igita I Mags.com 




Android Magazine 
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foursquare 


]■*> « 

j*s@| 





feiEpS© 




■Spy- 

A.l. .l, i 



Download foursquare: 

4 iPhone 

0 OrOROO 




'Find pJfrcas 




CHECK-IN 

FIND YOUR FRIENDS 
UNLOCK YOUR CITY 

tcuf phsn* jtv*i vwi i jourmindi fWttmjT at fatwtt*; 


m 



RtCfiKTACrniTV 


i 

aifrTMOw 


« 

■Whshhi M. nun 

6hpv one Mqtt a Nap* Binatflnj 


iPhone 

cinoaoiD 



JMiHati* Ui t.Wtfi 



■ 

wrtta J B(|. |f AValftfl publit fiout* (id IB Avwn [yjt+c 
Ktat* vvfl 

■ 

OTHER DEVICES 

-> 

n 

(fnfuiwW m Cgpn*ii^n> 
snaocMfl rp* T.*cj r mjw 

© 

m 


K 

1 nm r m finUMfllni 
unwladttc 'tupwUMf' &»jf 

• 

fOUW ww 




JOIN NOW 




M>-j* 0 m tm* vat catf 
^PL; 4 Up K CMC HVC M*f Mhon lurtuif Lift* C® to «C 
MYE ll* huh sunA^iMm 




? J*n H, ■! Cm «90 

[KWKKH1FM ' iavprmi ri^ &*»■ 


£v*n li. m Owner* 


WUtun K. m Unnupots l 5< 


Imm (*e mvfv drip *ow« *hDp 


PNG header 

Tl ie header image uses 
the PNGformat to gtve It 
transparency which in 
turn allows the Image to 
integrate with any 
background colour or 
Image near it 

Central column 

To ensure that the page 
content is best presented 
for desktop resolutions, a 
centrally-placed column 

is used. Auto left and 
right margins always 
ensure that the main 
column is centred. 


Ttat a ep £ MOV A Dtugner **Hf> root a, Una r«> n 
iw 



Footer 

The 2G11 version of foursquare was still very similar to 2009. The mcjsl 
noticeable difference being II le addition erf a new. improved footer. A dark 
footer and light blue text gives it more impact and better legibility. 


IB ”-— * 
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foursquare www.foursquare.com 

The location-based service is a more modern-day 'style relic'. No tables, frames 
or inline styling here, but the original site still shows its age in more subtle ways 


As a service, foursquare has only been around 
since 2009. However Its not short of users, with 
around 15 million checking In' worldwide. 

foursquare has a relatively short lifespan, which 
means that it doesn't have a dinosaur design 
lurking in its past. The desktop version has only 
gone through a couple of updates, and still retains 


elements found in the 2009 incarnation. The 
original design used a simple centrally placed 
column with a big header. Recent Activity and Get It 
Now options. An iterative update in 2011 saw more 
action in Get It Now and an upgraded footer. Finally, 
in 2012 a new update saw a switch to the 
contemporary and popular image slider option. 
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# heart interne 


Create your own custom 





vCPU HDD 


RAM 


Fully scalable and customisable 

Your VPS specs can be modified on the 
fly to ensure you can meet any sudden 
changes in demand or popularity. 


VPS without compromises 

Affordable yet high-quality VPS hosting 
without compromise. We use branded 
Intel processors and Dell servers in our 
UK data centre. 


From only £11.99 per month 


Advanced virtualisation technology 

KVM is the latest generation of virtualisation 
technology, offering high-performance 
access to server resources for both Linux and 
Windows virtual private servers. 



✓ 24/7 UK Support 


✓ Free & Instant Setup 


✓ 99.99% Uptime SLA 


/ Full root access 


Find out more: www.heartinternet.co.uk 
Call us: 0845 644 7750 

Price ftKdudflfc VAT at fcp% 


Jp* heart internet 

www.heartinternet.co.uk 


Web hosling I Reseller hosting I VPS I Servers 








CODING 

people 


UPLOAD YOUR 
DESIGN 


y/tthin 

VvOU fS 


DOWNLOAD 
YOUR CODE 


Sf XHTML 


Word press 


Mogento 


www.codingpeople.co.uk 


coupon code: 

»>CO30CPUK« 


on your first order 


^ Joomla 




Contao 












